/* ============================================================ * VietRica brand stylesheet — public marketing site * ============================================================ * Adds the classic gold/navy/paper academic theme on top of * Tailwind v3 (Play CDN). Loaded after Tailwind in _head.php so * Tailwind utility classes still take precedence when stacked. * * The aesthetic is borrowed from the certificate page (Cormorant SC * small-caps display + Cormorant Garamond serif + gold borders + paper * cream background). Use these branded components for hero, * cards, dividers, seals, and CTAs; keep using raw Tailwind * for layout, spacing, and responsive breakpoints. * * Tokens (also exposed as Tailwind colours under the `brand-*` * namespace via _head.php — bg-brand-gold, text-brand-navy, ...): * * --gold #c9a227 primary accent * --gold-dark #8a6d0b borders / dark accents * --gold-soft #e8d28e subtle borders / dashed lines * --navy #0e2a4a primary text / CTAs * --navy-soft #1d4476 hover state * --paper #fdfaf2 cream "paper" background * --ink #1a1a1a default body text * ============================================================ */ :root { --gold: #c9a227; --gold-dark: #8a6d0b; --gold-soft: #e8d28e; --navy: #0e2a4a; --navy-soft: #1d4476; --paper: #fdfaf2; --ink: #1a1a1a; } /* ---------- Base typography rhythm ---------------------------------- * Cormorant Garamond has a shorter x-height than Georgia (the fallback * served until Google Fonts finishes loading). Without compensation the * page paints comfortably with Georgia and then visibly shrinks the * moment Cormorant swaps in (the "1/2 second large then small" effect * the user reported). * * Two fixes stacked: * 1) `font-size-adjust: from-font` — modern browsers normalise the * x-height across fonts so the swap doesn't change perceived size. * Chromium / Firefox / Safari 17+ all support it; older browsers * simply ignore the property and fall back to fix #2. * 2) Bumping the body to 17px — gives Cormorant enough headroom that * it visually reads like Georgia at 16px. Inherited paragraph copy * (no explicit text-* utility) picks this up automatically. * * Tailwind utility classes keep their own rem-based sizing untouched. */ body { font-size: 1.0625rem; line-height: 1.55; font-size-adjust: from-font; } /* ---------- Backgrounds ------------------------------------ */ /* Page background — soft warm gradient evoking parchment. * Apply on for marketing pages so cards stand out. */ .brand-paper-bg { background: radial-gradient(circle at 15% 20%, #fff7e0 0%, transparent 40%), radial-gradient(circle at 85% 85%, #fff7e0 0%, transparent 40%), linear-gradient(180deg, #fefbf3 0%, #faf3df 100%); } /* Hero — richer parchment gradient for the page-top splash. */ .brand-hero-bg { background: radial-gradient(circle at 15% 20%, rgba(255,247,224,.7) 0%, transparent 40%), radial-gradient(circle at 85% 85%, rgba(255,247,224,.6) 0%, transparent 40%), linear-gradient(135deg, #f5ecd1 0%, #e8d8a8 100%); } /* Subtle alternating section background (used between brand-paper-bg * sections to break the page rhythm). */ .brand-section-alt { background: linear-gradient(180deg, #faf3df 0%, #f0e6cc 100%); } /* "Paper" sheet — gold double border + thin inner frame, mirrors * the cert paper. Use for hero feature cards / pull-quotes. */ .brand-paper { background: var(--paper); border: 6px solid var(--gold); position: relative; box-shadow: 0 0 0 1px var(--gold-soft) inset, 0 18px 50px rgba(14,42,74,.08); } .brand-paper::before { content: ''; position: absolute; inset: 12px; border: 1px solid var(--gold); pointer-events: none; } /* ---------- Typography ------------------------------------- */ /* Display heading (Cormorant SC uppercase, navy). */ .brand-display { font-family: 'Cormorant SC', Georgia, serif; font-weight: 700; letter-spacing: .08em; color: var(--navy); text-transform: uppercase; line-height: 1.1; } /* Eyebrow label — small Cormorant SC above a section heading. */ .brand-eyebrow { font-family: 'Cormorant SC', Georgia, serif; letter-spacing: .35em; text-transform: uppercase; font-size: .8rem; color: var(--gold-dark); display: inline-block; } /* Cursive script accent (Great Vibes) — sparingly: hero name, * decorative quote, signature. Don't run multi-line text. */ .brand-script { font-family: 'Great Vibes', cursive; color: var(--navy); line-height: 1; } /* Serif body — for paragraph-style copy on marketing pages. * Long descriptions use this; data tables stick to default sans. */ .brand-serif { font-family: 'Cormorant Garamond', Georgia, serif; } /* ---------- Dividers --------------------------------------- */ /* Horizontal rule with diamond centre — matches the cert title rule. */ .brand-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--gold); margin: .75rem auto; max-width: 480px; } .brand-divider .line { height: 1px; background: var(--gold); flex: 1; max-width: 120px; opacity: .6; } .brand-divider .diamond { width: 26px; height: 26px; background: url('../course/viet-rica-icon.png') no-repeat center / contain; flex-shrink: 0; /* Slight bounce when the divider scrolls into view (purely decorative, * disabled for prefers-reduced-motion users below). */ } @media (max-width: 640px) { .brand-divider .diamond { width: 22px; height: 22px; } } @media (prefers-reduced-motion: no-preference) { .brand-divider .diamond { transition: transform .35s ease; } .brand-divider:hover .diamond { transform: scale(1.15) rotate(8deg); } } /* Dashed accent — section-break or sub-divider. */ .brand-dashed { border-top: 1px dashed var(--gold-soft); } /* ---------- Buttons ---------------------------------------- */ .brand-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.5rem; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.05rem; letter-spacing: .02em; border-radius: 4px; text-decoration: none; border: 0; cursor: pointer; transition: transform .2s ease, background-color .2s ease, color .2s ease; white-space: nowrap; } .brand-btn-primary { background: var(--navy); color: #fff; } .brand-btn-primary:hover { background: var(--navy-soft); transform: translateY(-1px); } .brand-btn-gold { background: var(--gold); color: var(--navy); } .brand-btn-gold:hover { background: var(--gold-dark); color: #fff; transform: translateY(-1px); } .brand-btn-ghost { background: transparent; color: var(--navy); border: 1px solid var(--navy); } .brand-btn-ghost:hover { background: var(--navy); color: #fff; transform: translateY(-1px); } .brand-btn-link { color: var(--gold-dark); background: transparent; padding: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold-soft); font-weight: 600; } .brand-btn-link:hover { color: var(--navy); text-decoration-color: var(--gold); } /* ---------- Cards ------------------------------------------ */ /* Standard listing card (category, course tile). White background, gold * top accent, hover lift. Use as the base for the small grid items. */ .brand-card { background: #fff; border: 1px solid var(--gold-soft); border-top: 4px solid var(--gold); border-radius: 4px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; } .brand-card:hover { border-color: var(--gold); box-shadow: 0 12px 28px rgba(14,42,74,.12); transform: translateY(-3px); } /* Cover frame for course/category images — gold-edged, paper backed. */ .brand-cover { background: var(--paper); border-bottom: 1px solid var(--gold-soft); overflow: hidden; display: block; } .brand-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .brand-card:hover .brand-cover img { transform: scale(1.04); } /* Round seal — small gold badge for inline use (course completion * indicator, featured badge, etc.). */ .brand-seal { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #f5e08a 0%, var(--gold) 50%, var(--gold-dark) 100%); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--gold-dark), 0 4px 12px rgba(0,0,0,.15); color: var(--navy); font-family: 'Cormorant SC', Georgia, serif; font-weight: 700; font-size: .9rem; letter-spacing: .04em; } /* ---------- Section heading block -------------------------- */ /* Pattern: eyebrow + display title + optional subtitle, centred. */ .brand-section-head { text-align: center; margin-bottom: 2.5rem; } .brand-section-head .brand-eyebrow { margin-bottom: .5rem; } .brand-section-head h2, .brand-section-head .title { font-family: 'Cormorant SC', Georgia, serif; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); font-size: clamp(1.6rem, 3.5vw, 2.25rem); line-height: 1.15; margin: 0; } .brand-section-head .subtitle { font-family: 'Cormorant Garamond', serif; color: #555; font-size: 1.15rem; margin-top: .5rem; font-style: italic; } /* ---------- Footer ----------------------------------------- */ .brand-footer { background: var(--navy); color: #d8c898; border-top: 4px solid var(--gold); } .brand-footer a { color: #f5e08a; transition: color .2s ease; } .brand-footer a:hover { color: #fff; } .brand-footer .brand-eyebrow { color: var(--gold); } /* ---------- Misc accents ----------------------------------- */ /* Inline gold underline link (hover lifts to navy). */ .brand-link { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-soft); transition: color .15s ease, text-decoration-color .15s ease; } .brand-link:hover { color: var(--navy); text-decoration-color: var(--gold); } /* "Pill" tag — small inline label with gold-tinted background. */ .brand-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; font-family: 'Cormorant SC', Georgia, serif; font-size: .65rem; letter-spacing: .25em; text-transform: uppercase; background: rgba(201,162,39,.12); color: var(--gold-dark); border: 1px solid var(--gold-soft); border-radius: 999px; } /* Price block — Cormorant SC + navy. */ .brand-price { font-family: 'Cormorant SC', Georgia, serif; font-weight: 700; color: var(--navy); letter-spacing: .02em; font-variant-numeric: tabular-nums; } /* ---------- Brand map frame (footer Google Map embed) --------------- * Wraps the Google Maps iframe so its raw blue-grey palette doesn't * clash with the cream / navy / gold brand. Two layers do the work: * * 1) `filter:` on the iframe — shifts the map's blue water and grey * roads toward warm gold-cream via sepia + hue-rotate. Lifts on * hover so users can still read it clearly when interacting. * 2) Pseudo-elements on the wrapper — a navy vignette at the top, a * gold vignette at the bottom, plus an inner thin gold-soft border * that mirrors the certificate "paper" frame. * * pointer-events on the overlays are off so map pan/zoom still work. */ .brand-map-frame { position: relative; isolation: isolate; overflow: hidden; border-radius: 4px; border: 1px solid var(--gold); background: var(--paper); box-shadow: 0 0 0 1px var(--gold-soft) inset, 0 12px 28px rgba(14, 42, 74, 0.22); transition: border-color .25s ease, box-shadow .25s ease; } .brand-map-frame:hover { border-color: var(--gold-dark); box-shadow: 0 0 0 1px var(--gold) inset, 0 14px 34px rgba(14, 42, 74, 0.28); } .brand-map-frame iframe { display: block; width: 100%; filter: sepia(0.45) saturate(0.8) hue-rotate(-12deg) brightness(1.02) contrast(0.96); transition: filter .4s ease; } .brand-map-frame:hover iframe { filter: sepia(0.22) saturate(0.95) hue-rotate(-6deg) brightness(1.05) contrast(0.98); } .brand-map-frame::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse at 50% 0%, rgba(14, 42, 74, 0.18) 0%, transparent 45%), radial-gradient(ellipse at 50% 100%, rgba(201, 162, 39, 0.22) 0%, transparent 55%); } .brand-map-frame::after { content: ''; position: absolute; inset: 6px; pointer-events: none; z-index: 2; border: 1px solid rgba(232, 210, 142, 0.6); border-radius: 3px; } /* ---------- Brand prose (Terms / Privacy / Custom pages) ------------ * Self-contained article typography that doesn't depend on the * Tailwind typography plugin (Play CDN doesn't ship with it). Apply * .brand-prose to a container holding HTML stored in the DB and the * inner h1-h6 / p / ul / ol / a / table / blockquote get styled to * match the brand. */ .brand-prose { color: #2c3e50; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.0625rem; line-height: 1.7; } .brand-prose > * + * { margin-top: 1rem; } .brand-prose p { margin: 0 0 1rem; } .brand-prose .lead { font-size: 1.2rem; color: #1f2a44; margin-bottom: 1.5rem; } .brand-prose h1, .brand-prose h2, .brand-prose h3, .brand-prose h4 { font-family: 'Cormorant SC', Georgia, serif; font-weight: 700; color: var(--navy); letter-spacing: .05em; text-transform: uppercase; line-height: 1.25; } .brand-prose h2 { font-size: 1.5rem; margin: 2.25rem 0 .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--gold-soft); } .brand-prose h3 { font-size: 1.2rem; margin: 1.75rem 0 .5rem; color: var(--gold-dark); } .brand-prose h4 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; letter-spacing: .03em; } .brand-prose b, .brand-prose strong { color: var(--navy); font-weight: 700; } .brand-prose a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-soft); transition: color .15s ease, text-decoration-color .15s ease; } .brand-prose a:hover { color: var(--navy); text-decoration-color: var(--gold); } .brand-prose ul, .brand-prose ol { margin: 1rem 0 1rem 1.25rem; padding-left: .5rem; } .brand-prose ul { list-style: disc; } .brand-prose ol { list-style: decimal; } .brand-prose li { margin: .35rem 0; } .brand-prose li::marker { color: var(--gold-dark); } .brand-prose blockquote { margin: 1.25rem 0; padding: .75rem 1.25rem; border-left: 3px solid var(--gold); background: rgba(232,210,142,.18); font-style: italic; color: #3a4660; } .brand-prose pre, .brand-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; } .brand-prose pre { background: #fdfaf2; border: 1px solid var(--gold-soft); border-radius: 4px; padding: .85rem 1rem; overflow-x: auto; } .brand-prose table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .98rem; } .brand-prose th, .brand-prose td { padding: .55rem .75rem; border-bottom: 1px solid var(--gold-soft); text-align: left; } .brand-prose th { font-family: 'Cormorant SC', Georgia, serif; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); background: rgba(232,210,142,.18); } @media (max-width: 640px) { .brand-prose { font-size: 1rem; line-height: 1.65; } .brand-prose h2 { font-size: 1.3rem; } .brand-prose h3 { font-size: 1.1rem; } .brand-prose .lead { font-size: 1.1rem; } } /* ---------- Hero slider (homepage carousel) ----------------------- * 3-slide carousel with photo background, fade transitions, gold dots, * navy arrow buttons, and Ken Burns zoom on the active slide. The * markup expects: * .brand-hero-slider * .brand-hero-slide.is-active * .brand-hero-slide-bg (background-image set inline) * .brand-hero-slide-overlay * .brand-hero-slide-content * ... * .brand-hero-arrow.prev / .next * .brand-hero-dots > .brand-hero-dot.is-active */ .brand-hero-slider { position: relative; overflow: hidden; isolation: isolate; } .brand-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; z-index: 1; } .brand-hero-slide.is-active { opacity: 1; visibility: visible; z-index: 2; transition: opacity .9s ease, visibility 0s linear 0s; } /* First slide gets a static placeholder height via .brand-hero-slide-spacer * so the section keeps its natural height without absolute children. */ .brand-hero-slide-spacer { visibility: hidden; pointer-events: none; } .brand-hero-slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.02); transition: transform 8s ease-out; z-index: -2; } .brand-hero-slide.is-active .brand-hero-slide-bg { transform: scale(1.10); } /* Cream-tinted gradient overlay so navy serif text stays readable on * any photo. Strongest at the bottom-center where the CTAs sit. */ .brand-hero-slide-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(253,250,242,.92) 0%, rgba(253,250,242,.70) 35%, rgba(245,236,209,.78) 75%, rgba(232,216,168,.92) 100%); z-index: -1; } /* Content fades + slides up gently when slide becomes active. */ .brand-hero-slide-content { opacity: 0; transform: translateY(14px); transition: opacity .8s ease .15s, transform .8s ease .15s; } .brand-hero-slide.is-active .brand-hero-slide-content { opacity: 1; transform: translateY(0); } /* Arrow buttons — gold-bordered circle with navy chevron. Positioned * inside the hero, vertically centred, hidden on small screens (mobile * uses swipe). */ .brand-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--navy); border: 1px solid var(--gold-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; backdrop-filter: blur(4px); transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .brand-hero-arrow:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-50%) scale(1.06); } .brand-hero-arrow.prev { left: 16px; } .brand-hero-arrow.next { right: 16px; } @media (min-width: 768px) { .brand-hero-arrow { width: 52px; height: 52px; font-size: 1.15rem; } .brand-hero-arrow.prev { left: 24px; } .brand-hero-arrow.next { right: 24px; } } @media (max-width: 640px) { .brand-hero-arrow { display: none; } } /* Dots — bottom-centre, gold pill-row. */ .brand-hero-dots { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: .55rem; z-index: 5; } .brand-hero-dot { width: 28px; height: 5px; border-radius: 999px; background: rgba(14,42,74,.18); border: 0; cursor: pointer; padding: 0; transition: background .25s ease, width .25s ease; } .brand-hero-dot:hover { background: rgba(14,42,74,.4); } .brand-hero-dot.is-active { background: var(--gold-dark); width: 44px; } /* Mobile: pull dots inside the hero so they don't get cut by URL bar. */ @media (max-width: 640px) { .brand-hero-dots { bottom: 12px; } .brand-hero-dot { width: 22px; } .brand-hero-dot.is-active { width: 34px; } } /* Honour reduced-motion users — kill the Ken Burns zoom. */ @media (prefers-reduced-motion: reduce) { .brand-hero-slide, .brand-hero-slide-bg, .brand-hero-slide-content { transition: opacity .2s linear !important; transform: none !important; } } /* ---------- Mobile readability — small-text only -------------------- * Bump just the elements that read as too small on a phone (eyebrows, * pill tags, footer copyright + nav links). Main content (display * titles, card titles, body paragraphs) was reported as comfortable * already, so it's left alone here. */ @media (max-width: 640px) { /* Tracked uppercase Cormorant SC labels — wider letter-spacing makes * tiny sizes feel even tinier; ease both. */ .brand-eyebrow { font-size: .8rem; letter-spacing: .25em; } /* Pill tag (e.g. "12 courses") */ .brand-tag { font-size: .7rem; letter-spacing: .18em; padding: .3rem .75rem; } /* Footer text — copyright, address, link list, eyebrow headings. * Default Tailwind text-sm = 14px is hard to read on small phones * with Cormorant Garamond's smaller x-height. */ .brand-footer p, .brand-footer ul li, .brand-footer ul li a { font-size: .95rem; line-height: 1.55; } .brand-footer .brand-eyebrow { font-size: .8rem; } }