/* ========================================================================== StoryStrong — brand-refresh.css Loads AFTER styles.css + polish.css. Additive; safe to delete. (1) Font correction — the brand guide prescribes only Playfair Display + Lora (Montserrat for the SOS sub-brand). Anton was off-guide, so it is remapped to Playfair Display Black. No new fonts are introduced. (2) Aged-book / parchment treatment — a warm, mottled paper ground with a fine grain and a soft sepia vignette, matching the handbook/certificate look. Kept subtle so body text keeps full contrast (WCAG). ========================================================================== */ /* (1) Anton -> Playfair Display Black -------------------------------------- */ .font-anton { font-family: 'Playfair Display', Georgia, serif !important; font-weight: 900 !important; letter-spacing: .005em !important; } /* (2) Aged paper ground ---------------------------------------------------- */ /* Default sections are transparent, so texturing flows through every light section automatically; solid dark sections cover it and stay clean. */ body { background-color: #f1e3c9; /* aged parchment, warmer than cream */ background-image: /* fine paper grain */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.21 0 0 0 0 0.09 0 0 0 0.42 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), /* warm mottling */ radial-gradient(68% 58% at 16% 20%, rgba(193,112,64,.10), transparent 62%), radial-gradient(62% 55% at 84% 78%, rgba(139,37,0,.07), transparent 62%), /* top light + bottom sepia vignette */ radial-gradient(120% 82% at 50% -6%, rgba(255,250,238,.55), transparent 55%), radial-gradient(135% 120% at 50% 118%, rgba(58,22,8,.14), transparent 60%); background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-size: 240px 240px, auto, auto, auto, auto; background-attachment: fixed, fixed, fixed, fixed, fixed; } /* Parchment sections: same aged grain so they don't read as flat panels. */ .bg-parch-sec { background-color: #efe0c4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.21 0 0 0 0 0.09 0 0 0 0.40 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g2)'/%3E%3C/svg%3E"), radial-gradient(90% 70% at 50% 0%, rgba(255,249,236,.5), transparent 60%); background-size: 240px 240px, auto; } /* Cards read as clean sheets laid on the aged desk — a hair of paper warmth and a soft edge so they lift off the textured ground. */ .card, .bento-item:not(.dark):not(.accent), .form-card { box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 14px 34px -22px rgba(58,22,8,.45); } /* Espresso (dark) sections get a faint warm grain so the whole book feels of one material — very low intensity so it never touches legibility. */ .bg-espresso-sec, .hero.on-dark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.76 0 0 0 0 0.44 0 0 0 0 0.25 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g3)'/%3E%3C/svg%3E"), linear-gradient(var(--espresso), var(--espresso)); background-size: 240px 240px, auto; } @media (prefers-reduced-motion: reduce) { body { background-attachment: scroll; } }