/* ================================================================ TALAL PUBLISHERS — Global Design System v4 Luxury Editorial Aesthetic Fonts: Cormorant Garamond (serif) + DM Sans (body) + DM Mono (labels) ================================================================ */ /* ── Font imports (also add to each page for performance) ── */ /* @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300&family=DM+Mono:wght@400;500&display=swap'); */ /* ================================================================ DESIGN TOKENS ================================================================ */ :root { /* ── Core Brand Palette ── */ --ink: #0d1c1f; --ink-2: #1b3237; --teal-deep: #04424c; --teal: #0a6b7a; --teal-mid: #0e8e9f; --teal-light: #1ab3c8; --teal-pale: #e3f5f7; --teal-pale2: #b8e8ee; --gold-deep: #8b5e06; --gold: #c8820a; --gold-mid: #e09b1a; --gold-light: #f5c842; --gold-pale: #fdf5e0; --cream: #faf7f2; --cream-2: #f3efe8; --white: #ffffff; --slate: #2d4852; --gray: #5b7480; --gray-light: #8fa8b0; --border: #e0e9eb; --border-2: #d0dde0; --surface: #f4f8f9; /* ── Typography ── */ --ff-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --ff-sans: "DM Sans", system-ui, -apple-system, sans-serif; --ff-mono: "DM Mono", "Courier New", monospace; /* ── Spacing Scale ── */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px; --s32: 128px; /* ── Border Radius ── */ --r-xs: 4px; --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-2xl: 40px; --r-full: 9999px; /* ── Shadows ── */ --sh-xs: 0 1px 3px rgba(4, 66, 76, 0.04); --sh-sm: 0 2px 8px rgba(4, 66, 76, 0.06); --sh-md: 0 8px 28px rgba(4, 66, 76, 0.1); --sh-lg: 0 20px 60px rgba(4, 66, 76, 0.14); --sh-xl: 0 32px 80px rgba(4, 66, 76, 0.18); --sh-teal: 0 6px 24px rgba(10, 107, 122, 0.26); --sh-gold: 0 6px 24px rgba(200, 130, 10, 0.28); /* ── Easing ── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Transitions ── */ --t-fast: 0.15s; --t-base: 0.28s; --t-slow: 0.5s; --t-slower: 0.8s; /* ── Layout ── */ --nav-h: 76px; --mw: 1240px; --mw-sm: 900px; --mw-xs: 680px; } /* ================================================================ BASE RESET ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--ff-sans); color: var(--ink); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Subtle grain texture overlay — gives premium print feel */ body::before { content: ""; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.025; pointer-events: none; z-index: 9999; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } ul, ol { list-style: none; } input, textarea, select { font-family: inherit; } /* ================================================================ TYPOGRAPHY ================================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--ff-serif); color: var(--ink); line-height: 1.12; font-weight: 600; letter-spacing: -0.015em; } h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); } h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); } h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); } h4 { font-size: 1.25rem; } h5 { font-size: 1.05rem; } p { font-size: 1rem; line-height: 1.8; color: var(--gray); } .lead { font-size: 1.12rem; line-height: 1.84; } .small { font-size: 0.88rem; } .xs { font-size: 0.75rem; } /* ================================================================ LAYOUT HELPERS ================================================================ */ .container { max-width: var(--mw); margin: 0 auto; padding: 0 var(--s10); } .container-sm { max-width: var(--mw-sm); margin: 0 auto; padding: 0 var(--s6); } .container-xs { max-width: var(--mw-xs); margin: 0 auto; padding: 0 var(--s6); } .section { padding: 110px 0; } .section-sm { padding: var(--s16) 0; } .section-lg { padding: var(--s32) 0; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); } .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s6); } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } /* ================================================================ SECTION LABELS & HEADINGS ================================================================ */ /* Monospace eyebrow label with ruled prefix */ .label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-mid); margin-bottom: var(--s5); } .label::before { content: ""; display: block; width: 28px; height: 1.5px; background: var(--teal-mid); flex-shrink: 0; } .label.gold-label { color: var(--gold); } .label.gold-label::before { background: var(--gold); } .label.white-label { color: rgba(255, 255, 255, 0.65); } .label.white-label::before { background: rgba(255, 255, 255, 0.4); } /* Section heading */ .section-heading { font-family: var(--ff-serif); font-size: clamp(2rem, 3.8vw, 3.2rem); font-weight: 600; color: var(--ink); line-height: 1.14; letter-spacing: -0.018em; margin-bottom: var(--s4); } .section-heading em { font-style: italic; color: var(--teal); } .section-heading .gold-em { font-style: italic; color: var(--gold); } .section-heading.light { color: #fff; } .section-heading.light em { color: var(--gold-mid); } /* Legacy alias (keeps old pages working) */ .section-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-mid); margin-bottom: var(--s5); } .section-eyebrow::before { content: ""; display: block; width: 28px; height: 1.5px; background: var(--teal-mid); flex-shrink: 0; } .section-subtext { font-size: 1.02rem; color: var(--gray); max-width: 580px; line-height: 1.8; margin-top: var(--s4); } .section-header.centered { text-align: center; } .section-header.centered .label, .section-header.centered .section-eyebrow { justify-content: center; } .section-header.centered .section-subtext { margin: var(--s4) auto 0; } .section-header { margin-bottom: var(--s12); } /* Ornamental divider */ .ornament { display: flex; align-items: center; gap: 12px; margin: 22px 0 32px; } .ornament.center { justify-content: center; } .ornament-line { flex: 1; height: 1px; background: var(--border-2); } .ornament.center .ornament-line { max-width: 60px; } .ornament-diamond { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; } /* Legacy divider alias */ .section-divider { width: 56px; height: 3px; background: linear-gradient(90deg, var(--teal), var(--gold-mid)); border-radius: var(--r-full); margin: var(--s4) 0 var(--s6); } .section-divider.center { margin: var(--s4) auto var(--s6); } /* ================================================================ BUTTONS ================================================================ */ .btn { display: inline-flex; align-items: center; gap: var(--s2); padding: 14px 28px; font-family: var(--ff-sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; border-radius: var(--r-xs); cursor: pointer; transition: all var(--t-base) var(--ease-out); border: none; white-space: nowrap; position: relative; overflow: hidden; line-height: 1; text-decoration: none; } .btn::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0); transition: background var(--t-fast); } .btn:hover::after { background: rgba(255, 255, 255, 0.08); } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--teal-deep); color: #fff; box-shadow: var(--sh-teal); } .btn-primary:hover { background: var(--teal); box-shadow: 0 10px 36px rgba(4, 66, 76, 0.36); transform: translateY(-2px); } .btn-gold { background: linear-gradient(135deg, var(--gold-deep), var(--gold-mid)); color: #fff; box-shadow: var(--sh-gold); } .btn-gold:hover { box-shadow: 0 10px 36px rgba(200, 130, 10, 0.44); transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--border-2); padding: 12px 26px; } .btn-outline:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-pale); transform: translateY(-2px); } .btn-outline-white { background: transparent; color: rgba(255, 255, 255, 0.88); border: 1.5px solid rgba(255, 255, 255, 0.28); padding: 12px 26px; } .btn-outline-white:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.55); color: #fff; transform: translateY(-2px); } .btn-ghost { color: var(--teal); padding: 10px 0; border-radius: 0; font-size: 0.9rem; } .btn-ghost:hover { color: var(--teal-mid); } .btn-ghost:hover::after { background: transparent; } .btn-lg { padding: 16px 34px; font-size: 0.925rem; } .btn-sm { padding: 10px 22px; font-size: 0.84rem; } .btn-xs { padding: 7px 16px; font-size: 0.75rem; } /* ================================================================ CARDS ================================================================ */ .card { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; transition: all var(--t-base) var(--ease-out); border: 1px solid var(--border); } .card:hover { box-shadow: var(--sh-lg); transform: translateY(-8px); border-color: transparent; } /* ================================================================ BADGES ================================================================ */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; font-family: var(--ff-mono); font-size: 0.63rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; border-radius: var(--r-full); } .badge-teal { background: var(--teal-pale); color: var(--teal); border: 1px solid var(--teal-pale2); } .badge-gold { background: var(--gold-pale); color: var(--gold-deep); border: 1px solid rgba(200, 130, 10, 0.2); } .badge-green { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } .badge-blue { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; } .badge-purple { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; } /* ================================================================ NAVBAR ================================================================ */ #navbar, #tp-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 1000; transition: all var(--t-base) var(--ease-out); } #navbar.scrolled, #tp-nav.nav-solid { background: rgba(250, 247, 242, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 var(--border), var(--sh-sm); } .nav-inner, .nav-wrap { max-width: var(--mw); margin: 0 auto; padding: 0 var(--s10); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); } /* Logo */ .nav-logo { display: flex; flex-direction: column; gap: 2px; text-decoration: none; } .nav-logo-name { font-family: var(--ff-serif); font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1; transition: color var(--t-base); letter-spacing: -0.01em; } .nav-logo-sub { font-family: var(--ff-mono); font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); transition: color var(--t-base); } #navbar.scrolled .nav-logo-name, #tp-nav.nav-solid .nav-logo-name { color: var(--ink); } #navbar.scrolled .nav-logo-sub, #tp-nav.nav-solid .nav-logo-sub { color: var(--gray-light); } /* Nav links */ .nav-links, .nav-list { display: flex; align-items: center; gap: 2px; list-style: none; } .nav-links a, .nav-link { font-size: 0.855rem; font-weight: 500; color: rgba(255, 255, 255, 0.78); padding: 8px 14px; border-radius: var(--r-xs); transition: all var(--t-base); letter-spacing: 0.02em; text-decoration: none; } #navbar.scrolled .nav-links a, #tp-nav.nav-solid .nav-link { color: var(--slate); } .nav-links a:hover, .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } #navbar.scrolled .nav-links a:hover, #tp-nav.nav-solid .nav-link:hover { color: var(--teal); background: var(--teal-pale); } .nav-links a.active, .nav-link.active { color: var(--teal-light) !important; } #navbar.scrolled .nav-links a.active, #tp-nav.nav-solid .nav-link.active { color: var(--teal) !important; background: var(--teal-pale); } /* Nav CTA button */ .nav-cta { background: linear-gradient( 135deg, var(--gold-deep), var(--gold-mid) ) !important; color: #fff !important; border-radius: var(--r-xs) !important; padding: 9px 20px !important; font-weight: 600 !important; box-shadow: 0 3px 12px rgba(200, 130, 10, 0.3) !important; } .nav-cta:hover { box-shadow: 0 6px 20px rgba(200, 130, 10, 0.44) !important; transform: translateY(-1px) !important; background: linear-gradient(135deg, var(--gold-deep), var(--gold)) !important; color: #fff !important; } /* ================================================================ PAGE HERO (inner pages) ================================================================ */ .page-hero { padding: 170px 0 130px; background: var(--ink); position: relative; overflow: hidden; text-align: center; } .page-hero-bg { position: absolute; inset: 0; background: radial-gradient( ellipse 70% 60% at 60% 35%, rgba(10, 107, 122, 0.4), transparent 55% ), radial-gradient( ellipse 45% 70% at 15% 75%, rgba(4, 66, 76, 0.55), transparent 55% ), linear-gradient(160deg, #081a1f 0%, #0c2830 35%, #0a3d47 65%, #0d2830 100%); } .page-hero-texture { position: absolute; inset: 0; background-image: repeating-linear-gradient( -45deg, transparent, transparent 28px, rgba(255, 255, 255, 0.012) 28px, rgba(255, 255, 255, 0.012) 29px ); pointer-events: none; } .page-hero-grid { position: absolute; inset: 0; background-image: linear-gradient( rgba(255, 255, 255, 0.025) 1px, transparent 1px ), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 80px 80px; pointer-events: none; } .page-hero::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 90px; background: var(--white); clip-path: ellipse(55% 100% at 50% 100%); z-index: 3; } .page-hero-inner { position: relative; z-index: 2; } /* Pill badge */ .page-hero-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: var(--r-full); margin-bottom: 28px; backdrop-filter: blur(12px); } .php-dot { background: linear-gradient(90deg, var(--gold-deep), var(--gold-mid)); color: #fff; font-family: var(--ff-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-full); } .php-text { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.03em; } /* Legacy badge alias */ .page-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 22px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--r-full); font-family: var(--ff-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); margin-bottom: 26px; backdrop-filter: blur(10px); } .page-hero h1 { color: var(--white); margin-bottom: var(--s4); } .page-hero .lead { color: rgba(255, 255, 255, 0.62); max-width: 580px; margin: 0 auto var(--s6); font-weight: 300; } /* Breadcrumb */ .breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); } .breadcrumb a { color: rgba(255, 255, 255, 0.55); transition: color 0.2s; } .breadcrumb a:hover { color: rgba(255, 255, 255, 0.85); } .breadcrumb .sep { color: rgba(255, 255, 255, 0.22); } /* ================================================================ CTA BANNER ================================================================ */ .cta-banner { background: linear-gradient( 145deg, var(--ink), var(--teal-deep) 50%, var(--ink) ); border-radius: var(--r-xl); padding: 80px 60px; text-align: center; position: relative; overflow: hidden; } .cta-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 60% 70% at 30% 50%, rgba(10, 107, 122, 0.25), transparent 55% ), radial-gradient( ellipse 50% 60% at 75% 40%, rgba(200, 130, 10, 0.1), transparent 55% ); } .cta-banner::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( -45deg, transparent, transparent 28px, rgba(255, 255, 255, 0.012) 28px, rgba(255, 255, 255, 0.012) 29px ); } .cta-banner-inner { position: relative; z-index: 2; } .cta-banner h2 { color: var(--white); margin-bottom: var(--s4); } .cta-banner p { color: rgba(255, 255, 255, 0.55); margin: 0 auto var(--s8); max-width: 560px; font-weight: 300; } .cta-banner-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* Corner crop marks (print aesthetic) */ .cta-corner { position: absolute; width: 72px; height: 72px; opacity: 0.13; pointer-events: none; } .cc-tl { top: 22px; left: 22px; border-top: 1.5px solid #fff; border-left: 1.5px solid #fff; border-radius: 4px 0 0 0; } .cc-tr { top: 22px; right: 22px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; border-radius: 0 4px 0 0; } .cc-bl { bottom: 22px; left: 22px; border-bottom: 1.5px solid #fff; border-left: 1.5px solid #fff; border-radius: 0 0 0 4px; } .cc-br { bottom: 22px; right: 22px; border-bottom: 1.5px solid #fff; border-right: 1.5px solid #fff; border-radius: 0 0 4px 0; } /* ================================================================ FOOTER ================================================================ */ #site-footer, #tp-footer { background: var(--ink); color: rgba(255, 255, 255, 0.62); padding: 70px 0 30px; position: relative; overflow: hidden; } #site-footer::before, #tp-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent, var(--teal), var(--gold-mid), var(--teal), transparent ); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 60px; margin-bottom: 56px; } .footer-brand-name { font-family: var(--ff-serif); font-size: 1.65rem; color: #fff; font-weight: 700; margin-bottom: 6px; } .footer-brand-sub { font-family: var(--ff-mono); font-size: 0.62rem; color: rgba(255, 255, 255, 0.32); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; } .footer-desc { font-size: 0.875rem; color: rgba(255, 255, 255, 0.46); line-height: 1.72; max-width: 280px; margin-bottom: 24px; } .footer-ntn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-sm); font-family: var(--ff-mono); font-size: 0.68rem; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.05em; } .footer-col-title { font-family: var(--ff-serif); font-size: 1.02rem; color: #fff; font-weight: 600; margin-bottom: 18px; } .footer-links { display: flex; flex-direction: column; gap: 10px; list-style: none; } .footer-links a { font-size: 0.875rem; color: rgba(255, 255, 255, 0.48); transition: color 0.22s; } .footer-links a:hover { color: var(--teal-light); } .footer-contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: rgba(255, 255, 255, 0.48); margin-bottom: 12px; } .fci-icon { width: 28px; height: 28px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--teal-light); flex-shrink: 0; margin-top: 1px; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 28px; display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: rgba(255, 255, 255, 0.3); gap: 16px; flex-wrap: wrap; } .footer-bottom-links { display: flex; gap: 20px; } .footer-bottom-links a { color: rgba(255, 255, 255, 0.3); transition: color 0.2s; } .footer-bottom-links a:hover { color: rgba(255, 255, 255, 0.6); } /* ================================================================ SCROLL REVEAL ANIMATIONS ================================================================ */ .reveal, .reveal-left, .reveal-right, .reveal-up, .reveal-scale { opacity: 0; transition: opacity var(--t-slower) var(--ease-out), transform var(--t-slower) var(--ease-out); } .reveal { transform: translateY(32px); } .reveal-left { transform: translateX(-40px); } .reveal-right { transform: translateX(40px); } .reveal-up { transform: translateY(20px); } .reveal-scale { transform: scale(0.95); } .revealed { opacity: 1 !important; transform: none !important; } /* Stagger delays for .stagger > children */ .stagger .reveal:nth-child(1) { transition-delay: 0.05s; } .stagger .reveal:nth-child(2) { transition-delay: 0.12s; } .stagger .reveal:nth-child(3) { transition-delay: 0.19s; } .stagger .reveal:nth-child(4) { transition-delay: 0.26s; } .stagger .reveal:nth-child(5) { transition-delay: 0.33s; } .stagger .reveal:nth-child(6) { transition-delay: 0.4s; } .stagger .reveal:nth-child(7) { transition-delay: 0.47s; } .stagger .reveal:nth-child(8) { transition-delay: 0.54s; } /* ================================================================ COUNTER / STATS ================================================================ */ .count-num { font-family: var(--ff-serif); font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 700; color: var(--teal); line-height: 1; display: block; } /* ================================================================ PROGRESS BARS ================================================================ */ .progress-track { height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: var(--r-full); overflow: hidden; } .progress-fill { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--teal-light), var(--gold-mid)); width: 0; transition: width 1.8s var(--ease-out); } /* ================================================================ FORM ELEMENTS ================================================================ */ .form-group { margin-bottom: var(--s5); } .form-label { display: block; font-family: var(--ff-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin-bottom: var(--s2); } .form-control { width: 100%; padding: 13px 18px; background: var(--white); border: 1.5px solid var(--border); border-radius: var(--r-md); font-family: var(--ff-sans); font-size: 0.92rem; color: var(--slate); transition: all var(--t-base) var(--ease); outline: none; } .form-control:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10, 107, 122, 0.1); } .form-control::placeholder { color: var(--gray-light); } textarea.form-control { resize: vertical; min-height: 130px; } select.form-control { cursor: pointer; } /* ================================================================ UTILITY CLASSES ================================================================ */ .text-center { text-align: center; } .text-teal { color: var(--teal); } .text-gold { color: var(--gold); } .text-gray { color: var(--gray); } .text-muted { color: var(--gray-light); } .text-white { color: var(--white); } .text-ink { color: var(--ink); } .text-italic { font-style: italic; } .text-serif { font-family: var(--ff-serif); } .text-mono { font-family: var(--ff-mono); } .bg-white { background: var(--white); } .bg-cream { background: var(--cream); } .bg-surface { background: var(--surface); } .bg-ink { background: var(--ink); } .mt-2 { margin-top: var(--s2); } .mt-4 { margin-top: var(--s4); } .mt-6 { margin-top: var(--s6); } .mt-8 { margin-top: var(--s8); } .mb-2 { margin-bottom: var(--s2); } .mb-4 { margin-bottom: var(--s4); } .mb-6 { margin-bottom: var(--s6); } .mb-8 { margin-bottom: var(--s8); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1100px) { :root { --nav-h: 72px; } .container { padding: 0 var(--s8); } .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s10); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .cta-banner { padding: 64px 44px; } } @media (max-width: 768px) { :root { --nav-h: 66px; } .container { padding: 0 var(--s6); } .section { padding: 80px 0; } .footer-grid { grid-template-columns: 1fr; gap: var(--s8); } .grid-2, .grid-3 { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } .cta-banner { padding: 50px 28px; } .page-hero { padding: 130px 0 100px; } } @media (max-width: 480px) { :root { --nav-h: 62px; } .section { padding: 60px 0; } .btn-lg { padding: 14px 28px; font-size: 0.88rem; } .grid-4 { grid-template-columns: 1fr; } .cta-banner { padding: 40px 20px; } }