/*! Theme Name: drk Theme URI: http://underscores.me/ Author: Underscores.me Author URI: http://underscores.me/ Description: Description Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: drk Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. drk is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments /* ----------------------------------------------------------- Dr. Katiraei — Warm Sanctuary Palette: cream parchment, healing sage, warm clay Type: Museo Slab family (slab serif) — see for font loading ADA: WCAG 2.1 AA — contrast, labels, focus, keyboard, motion ----------------------------------------------------------- */ :root { /* Typography — Museo Slab family with slab-serif fallbacks */ --font-serif: "museo-slab", "Museo Slab", Rockwell, "Rockwell Nova", "Roboto Slab", Georgia, "Times New Roman", Times, serif; /* Warm, soothing palette — every text pair verified ≥ 4.5:1 contrast */ --cream: #f5efe2; /* page background */ --cream-soft: #faf5ea; /* elevated surfaces */ --paper: #fffdf6; /* card surfaces */ --sage: #5a7262; /* primary accent (white on sage = 5.1:1) */ --sage-deep: #344438; /* headings / dark accent */ --sage-soft: #e3ebe1; /* tints and highlights */ --clay: #9a5437; /* warm accent (white on clay = 5.8:1) */ --clay-soft: #f2e1d2; /* clay tints */ --ochre: #b8864a; /* golden accent */ --ink: #2a2621; /* body text (14:1 on cream) */ --ink-soft: #55504a; /* muted text (7.3:1 on cream) */ --line: #e3dbc9; /* borders */ --line-strong: #cfc5ad; /* stronger borders */ --shadow-sm: 0 4px 14px rgba(70, 55, 30, 0.06); --shadow-md: 0 18px 40px rgba(70, 55, 30, 0.09); --shadow-lg: 0 36px 80px rgba(70, 55, 30, 0.14); --radius: 20px; --radius-lg: 28px; --radius-pill: 999px; --t-slow: cubic-bezier(.2, .8, .2, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 17px; line-height: 1.7; color: var(--ink); background: var(--cream); background-image: radial-gradient(ellipse 1200px 600px at 85% -10%, rgba(184, 134, 74, 0.08), transparent 60%), radial-gradient(ellipse 900px 500px at 0% 40%, rgba(90, 114, 98, 0.07), transparent 60%), radial-gradient(ellipse 1000px 500px at 50% 100%, rgba(154, 84, 55, 0.05), transparent 60%); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Subtle paper grain for warmth */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); z-index: 0; } img { max-width: 100%; display: block; } a { color: var(--sage-deep); text-decoration: underline; text-decoration-color: rgba(90, 114, 98, 0.35); text-underline-offset: 3px; transition: color .2s var(--t-slow), text-decoration-color .2s var(--t-slow); } a:hover { color: var(--clay); text-decoration-color: var(--clay); } /* Accessible focus — visible on light and dark surfaces */ :focus { outline: none; } :focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; border-radius: 6px; } /* Skip link — first interactive element for screen readers & keyboard */ .skip-link { position: absolute; top: -100px; left: 16px; background: var(--sage-deep); color: var(--cream-soft); padding: 12px 20px; border-radius: 10px; font-weight: 700; z-index: 1000; text-decoration: none; transition: top .2s var(--t-slow); } .skip-link:focus { top: 16px; } .container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; position: relative; z-index: 1; } /* ----------------------------------------------------------- Header ----------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(245, 239, 226, 0.85); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid rgba(207, 197, 173, 0.4); } .header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; } .brand-mark { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--sage) 0%, var(--sage-deep) 100%); display: grid; place-items: center; color: var(--cream-soft); font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; box-shadow: var(--shadow-sm); } .brand-text { line-height: 1.2; } .brand-title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; color: var(--sage-deep); letter-spacing: -0.01em; } .brand-subtitle { font-size: 0.82rem; color: var(--ink-soft); margin-top: 1px; letter-spacing: 0.02em; } .nav { display: flex; gap: 36px; list-style: none; padding: 0; margin: 0; align-items: center; } .nav a { font-size: 0.95rem; color: var(--ink); text-decoration: none; font-weight: 500; padding: 8px 2px; position: relative; transition: color .2s var(--t-slow); } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--clay); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--t-slow); } .nav a:hover { color: var(--clay); } .nav a:hover::after { transform: scaleX(1); transform-origin: left; } .nav-cta { display: inline-flex; align-items: center; padding: 8px 20px !important; border-radius: var(--radius-pill); background: var(--sage-deep); color: var(--cream-soft) !important; text-decoration: none !important; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.01em; transition: opacity .2s var(--t-slow), transform .15s var(--t-slow); } .nav-cta:hover { opacity: 0.87; transform: translateY(-1px); color: var(--cream-soft) !important; } .nav-cta::after { display: none !important; } .nav-toggle { display: none; background: none; border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 10px 14px; color: var(--ink); font: inherit; cursor: pointer; } /* ----------------------------------------------------------- Hero ----------------------------------------------------------- */ .hero { position: relative; padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6.5vw, 80px); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 72px; align-items: center; } .pill { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong); background: rgba(255, 253, 246, 0.7); color: var(--sage-deep); border-radius: var(--radius-pill); padding: 10px 18px 10px 14px; font-size: 0.88rem; font-weight: 500; letter-spacing: 0.01em; box-shadow: var(--shadow-sm); } .pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 4px rgba(154, 84, 55, 0.18); } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; color: var(--sage-deep); letter-spacing: -0.015em; margin: 0; line-height: 1.14; } h1 { margin-top: 24px; font-size: clamp(2.35rem, 5vw, 4.1rem); font-weight: 700; } h1 em { font-style: italic; color: var(--clay); font-weight: 500; } .lead { margin-top: 28px; font-size: 1.15rem; color: var(--ink-soft); max-width: 560px; } .lead + .lead { margin-top: 16px; } .hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: var(--radius-pill); border: 1.5px solid transparent; font-family: inherit; font-weight: 700; font-size: 0.97rem; letter-spacing: 0.01em; cursor: pointer; text-decoration: none; transition: transform .25s var(--t-slow), box-shadow .25s var(--t-slow), background .25s var(--t-slow), color .25s var(--t-slow); } .btn-primary { background: var(--sage-deep); color: var(--cream-soft); box-shadow: var(--shadow-md); } .btn-primary:hover { background: var(--sage); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-secondary { background: var(--clay); color: var(--cream-soft); box-shadow: 0 14px 30px rgba(154, 84, 55, 0.22); } .btn-secondary:hover { background: #7f4229; transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--sage-deep); border-color: var(--line-strong); } .btn-ghost:hover { background: var(--sage-soft); border-color: var(--sage); } .btn .arrow { transition: transform .3s var(--t-slow); } .btn:hover .arrow { transform: translateX(4px); } /* Hero portrait */ .portrait-wrap { position: relative; justify-self: center; } .portrait-frame { position: relative; width: 100%; max-width: 520px; aspect-ratio: 5 / 4; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(160deg, var(--sage-soft) 0%, var(--cream-soft) 100%); border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; filter: saturate(0.98) contrast(1.02); } /* Decorative dashed outline behind */ .portrait-wrap::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border-radius: var(--radius-lg); border: 1.5px dashed rgba(90, 114, 98, 0.35); z-index: -1; } .portrait-wrap::after { content: ""; position: absolute; right: -24px; top: -24px; width: 130px; height: 130px; background: var(--clay-soft); border-radius: 50%; z-index: -1; filter: blur(2px); } .portrait-badge { position: absolute; left: -24px; bottom: -24px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 12px 18px 12px 12px; font-size: 0.82rem; color: var(--ink-soft); box-shadow: var(--shadow-md); max-width: 260px; line-height: 1.35; display: flex; align-items: center; gap: 12px; } .portrait-badge .badge-avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--sage-soft); border: 1.5px solid var(--line); } .portrait-badge .badge-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } .portrait-badge strong { display: block; font-family: var(--font-serif); font-weight: 700; color: var(--sage-deep); font-size: 0.95rem; margin-bottom: 2px; } /* ----------------------------------------------------------- Section scaffolding ----------------------------------------------------------- */ .section { padding: clamp(52px, 7vw, 88px) 0; position: relative; } .section--tight { padding: clamp(36px, 4.5vw, 56px) 0; } .kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--clay); font-weight: 700; margin-bottom: 18px; } .kicker::before { content: ""; width: 28px; height: 1.5px; background: var(--clay); } .section-title { max-width: 780px; font-size: clamp(1.9rem, 3.2vw, 2.75rem); font-weight: 700; } .section-intro { margin-top: 22px; font-size: 1.1rem; color: var(--ink-soft); max-width: 680px; } /* ----------------------------------------------------------- Who this serves — audience band ----------------------------------------------------------- */ .serves-section { padding: clamp(36px, 5vw, 64px) 0 clamp(20px, 3vw, 36px); } .serves-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; position: relative; overflow: hidden; } .serves-card::before { content: ""; position: absolute; top: -80px; right: -80px; width: 220px; height: 220px; background: radial-gradient(circle, var(--sage-soft), transparent 70%); opacity: 0.6; pointer-events: none; } .serves-intro { position: relative; z-index: 1; } .serves-intro h2 { font-size: clamp(1.65rem, 2.4vw, 2.15rem); font-weight: 700; margin-top: 14px; } .serves-intro p { margin: 18px 0 0; color: var(--ink-soft); font-size: 1.02rem; max-width: 460px; } .serves-audiences { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; z-index: 1; } .audience { background: linear-gradient(165deg, var(--cream-soft), var(--paper)); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; transition: transform .3s var(--t-slow), border-color .3s var(--t-slow), box-shadow .3s var(--t-slow); } .audience:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .audience .aud-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--sage-soft); color: var(--sage-deep); display: grid; place-items: center; margin-bottom: 16px; } .audience:nth-child(2) .aud-icon { background: var(--clay-soft); color: var(--clay); } .audience h3 { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 500; color: var(--sage-deep); margin-bottom: 6px; } .audience p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; } @media (max-width: 860px) { .serves-card { grid-template-columns: 1fr; } } @media (max-width: 520px) { .serves-audiences { grid-template-columns: 1fr; } } /* ----------------------------------------------------------- About section ----------------------------------------------------------- */ .about-card { margin-top: clamp(32px, 4.5vw, 48px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); display: grid; grid-template-columns: 1fr 1.3fr; } .about-side { background: linear-gradient(170deg, var(--sage-soft) 0%, var(--cream-soft) 100%); padding: 32px; border-right: 1px solid var(--line); position: relative; display: flex; flex-direction: column; } .about-headshot { position: relative; width: 100%; flex: 1; min-height: 380px; border-radius: 22px; overflow: hidden; background: #e8e2d2; box-shadow: var(--shadow-md); border: 1px solid var(--line); } .about-headshot img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; } .about-caption { margin-top: 22px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; } .about-caption .name { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; color: var(--sage-deep); letter-spacing: -0.005em; } .about-caption .role { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); font-weight: 700; } .about-copy { padding: 56px 48px; } .about-copy .lead-quote { font-family: var(--font-serif); font-size: 1.4rem; font-style: italic; line-height: 1.45; color: var(--sage-deep); margin: 0 0 28px; font-weight: 500; } .about-copy p { margin: 0 0 16px; color: var(--ink-soft); font-size: 1.05rem; } .about-copy p:last-child { margin-bottom: 0; } /* ----------------------------------------------------------- Mission section ----------------------------------------------------------- */ .mission-section { background: linear-gradient(180deg, transparent 0%, rgba(227, 235, 225, 0.4) 50%, transparent 100%); } .mission-grid { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .mission-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: var(--shadow-sm); transition: transform .35s var(--t-slow), box-shadow .35s var(--t-slow), border-color .35s var(--t-slow); position: relative; overflow: hidden; } .mission-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .mission-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--sage-soft); display: grid; place-items: center; color: var(--sage-deep); margin-bottom: 24px; } .mission-card:nth-child(2) .mission-icon { background: var(--clay-soft); color: var(--clay); } .mission-card:nth-child(3) .mission-icon { background: rgba(184, 134, 74, 0.18); color: var(--ochre); } .mission-card h3 { font-size: 1.4rem; font-weight: 500; } .mission-card p { margin: 14px 0 0; color: var(--ink-soft); font-size: 0.98rem; } /* ----------------------------------------------------------- Waitlist — Tabbed forms (reduces visual load) ----------------------------------------------------------- */ .waitlist-section { padding-top: 40px; } .waitlist-card { margin-top: clamp(32px, 4.5vw, 48px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } /* Segmented pill toggle — a familiar "tap to switch" pattern */ .tabs-wrap { padding: 22px 22px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; } .tabs-hint { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-soft); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; } .tabs-hint svg { opacity: 0.7; } .tabs { display: inline-flex; background: var(--cream); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); padding: 5px; gap: 0; position: relative; width: 100%; max-width: 520px; box-shadow: inset 0 1px 3px rgba(70, 55, 30, 0.05); } .tab { flex: 1 1 0; min-width: 0; padding: 12px 22px; background: transparent; border: none; border-radius: var(--radius-pill); font-family: var(--font-serif); font-size: 1rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: color .25s var(--t-slow), background .25s var(--t-slow), box-shadow .25s var(--t-slow), transform .25s var(--t-slow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab .tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background .25s var(--t-slow), transform .25s var(--t-slow); flex-shrink: 0; } .tab[aria-selected="true"] { background: var(--sage-deep); color: var(--cream-soft); box-shadow: 0 6px 18px rgba(52, 68, 56, 0.25); } .tab[aria-selected="true"] .tab-dot { background: var(--clay); transform: scale(1.15); } .tab:hover:not([aria-selected="true"]) { color: var(--sage-deep); background: rgba(227, 235, 225, 0.55); } .tab:hover:not([aria-selected="true"]) .tab-dot { background: var(--sage); } .tab-panels { padding: 48px; } .tab-panel { display: none; animation: fadeIn .4s var(--t-slow); } .tab-panel.is-active { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .panel-info h3 { font-size: 1.75rem; font-weight: 500; margin-bottom: 16px; } .panel-info p { color: var(--ink-soft); font-size: 1.02rem; margin: 0; } .panel-info ul { margin: 20px 0 0; padding: 0; list-style: none; } .panel-info li { position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--ink-soft); font-size: 0.97rem; } .panel-info li::before { content: ""; position: absolute; left: 0; top: 10px; width: 16px; height: 1.5px; background: var(--clay); } /* ----------------------------------------------------------- Forms ----------------------------------------------------------- */ .form { display: flex; flex-direction: column; gap: 18px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-size: 0.85rem; font-weight: 700; color: var(--sage-deep); letter-spacing: 0.01em; } .field label .req { color: var(--clay); margin-left: 2px; } .field input, .field textarea { width: 100%; min-height: 52px; padding: 14px 18px; font: inherit; font-size: 0.98rem; color: var(--ink); background: var(--cream-soft); border: 1.5px solid var(--line-strong); border-radius: 14px; transition: border-color .2s var(--t-slow), background .2s var(--t-slow), box-shadow .2s var(--t-slow); } .field textarea { min-height: 150px; resize: vertical; line-height: 1.55; } .field input::placeholder, .field textarea::placeholder { color: #8a8378; } .field input:hover, .field textarea:hover { border-color: var(--sage); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--sage-deep); background: var(--paper); box-shadow: 0 0 0 4px rgba(90, 114, 98, 0.18); } .field .hint { font-size: 0.8rem; color: var(--ink-soft); } .form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; } .form-footer .note { font-size: 0.82rem; color: var(--ink-soft); } /* ----------------------------------------------------------- Contact section ----------------------------------------------------------- */ .contact-grid { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 4.5vw, 56px); align-items: start; } .contact-info { position: sticky; top: 110px; } .contact-info .lead { margin-top: 0; } .contact-meta { margin-top: 32px; display: flex; flex-direction: column; gap: 18px; } .contact-meta-item { display: flex; gap: 14px; align-items: flex-start; } .contact-meta-item .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--sage-soft); display: grid; place-items: center; color: var(--sage-deep); flex-shrink: 0; } .contact-meta-item h4 { font-size: 0.98rem; font-weight: 700; color: var(--sage-deep); font-family: inherit; margin-bottom: 2px; } .contact-meta-item p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); } .contact-form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 44px; box-shadow: var(--shadow-md); } /* ----------------------------------------------------------- Social / footer ----------------------------------------------------------- */ .social-rail { margin-top: clamp(40px, 5.5vw, 64px); padding-top: clamp(28px, 3.5vw, 40px); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; } .social-rail .label { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-soft); font-weight: 700; } .social-list { display: flex; gap: 12px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .social-link { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: var(--radius-pill); background: var(--paper); border: 1.5px solid var(--line-strong); color: var(--sage-deep); font-size: 0.93rem; font-weight: 700; text-decoration: none; transition: all .25s var(--t-slow); } .social-link:hover { background: var(--sage-deep); color: var(--cream-soft); border-color: var(--sage-deep); transform: translateY(-2px); text-decoration: none; } .social-link svg { width: 18px; height: 18px; } footer.site-footer { margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); background: rgba(250, 245, 234, 0.5); } .footer-inner { padding: 36px 0; display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap; } .footer-inner p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; } .footer-inner .tagline { font-family: var(--font-serif); font-style: italic; color: var(--sage-deep); } /* ----------------------------------------------------------- Responsive ----------------------------------------------------------- */ @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; gap: 56px; } .portrait-wrap { order: -1; max-width: 540px; margin: 0 auto; } .about-card { grid-template-columns: 1fr; } .about-side { border-right: none; border-bottom: 1px solid var(--line); padding: 28px; } .about-headshot { min-height: 340px; } .about-copy { padding: 40px; } .mission-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; gap: 40px; } .contact-info { position: static; } .tab-panel.is-active { grid-template-columns: 1fr; gap: 36px; } .tab-panels { padding: 36px; } } @media (max-width: 720px) { body { font-size: 16px; } .container { width: min(1180px, calc(100% - 32px)); } .nav { display: none; } .nav-toggle { display: inline-flex; } .contact-form-card { padding: 28px; } .tabs-wrap { padding: 18px 16px 0; } .tab-panels { padding: 24px; } .tab { padding: 11px 14px; font-size: 0.88rem; gap: 6px; } .tab .tab-title { overflow: hidden; text-overflow: ellipsis; } .form-row { grid-template-columns: 1fr; } .about-side { padding: 20px; } .about-headshot { min-height: 280px; } .about-copy { padding: 30px 26px; } .about-copy .lead-quote { font-size: 1.2rem; } .portrait-badge { position: static; margin: 16px auto 0; max-width: 320px; } .portrait-wrap::before { inset: 12px -12px -12px 12px; } .social-rail { flex-direction: column; align-items: flex-start; gap: 20px; } .footer-inner { flex-direction: column; align-items: flex-start; } } /* ----------------------------------------------------------- Reduced motion — respect user OS settings (ADA) ----------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Screen reader only */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Form success/error announcement region */ .form-status { font-size: 0.9rem; color: var(--sage-deep); min-height: 1.2em; } /* ----------------------------------------------------------- Mission Page — Additional Styles Extends the base Dr. Katiraei stylesheet Adopts content-break patterns: photo-text blocks, pull quotes, stat banner, impact cards, dark principles, CTA card ----------------------------------------------------------- */ /* Top announcement bar */ /*.announce-bar {*/ /* background: var(--sage-deep);*/ /* color: var(--cream-soft);*/ /* text-align: center;*/ /* padding: 10px 24px;*/ /* font-size: 0.82rem;*/ /* font-weight: 500;*/ /* letter-spacing: 0.02em;*/ /* position: relative;*/ /* z-index: 51;*/ /*}*/ /*.announce-bar a {*/ /* color: var(--cream-soft);*/ /* text-decoration: none;*/ /* display: inline-flex;*/ /* align-items: center;*/ /* gap: 8px;*/ /* transition: opacity .2s var(--t-slow);*/ /*}*/ /*.announce-bar a:hover {*/ /* opacity: 0.8;*/ /* color: var(--cream-soft);*/ /*}*/ /*.announce-bar .arrow-sm {*/ /* transition: transform .3s var(--t-slow);*/ /*}*/ /*.announce-bar a:hover .arrow-sm {*/ /* transform: translateX(3px);*/ /*}*/ /* Nav CTA button */ .nav-cta { display: inline-flex; align-items: center; padding: 8px 20px; border-radius: var(--radius-pill); background: var(--sage-deep); color: var(--cream-soft) !important; text-decoration: none !important; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.01em; transition: opacity .2s var(--t-slow), transform .15s var(--t-slow); } .nav-cta:hover { opacity: 0.87; transform: translateY(-1px); color: var(--cream-soft) !important; } .nav-cta::after { display: none !important; } /* Mission hero */ .mission-hero { padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 6vw, 80px); text-align: center; position: relative; } .mission-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 800px 400px at 50% 0%, rgba(90, 114, 98, 0.08), transparent 70%), radial-gradient(ellipse 600px 300px at 80% 100%, rgba(154, 84, 55, 0.06), transparent 70%); pointer-events: none; } .mission-hero .container { max-width: 820px; } .mission-hero h1 { margin-top: 18px; font-size: clamp(2.2rem, 4.5vw, 3.5rem); text-align: center; } .mission-hero-lead { margin: 24px auto 0; max-width: 620px; font-size: 1.1rem; color: var(--ink-soft); line-height: 1.75; } /* Divider */ .divider { border: none; border-top: 1px solid var(--line); margin: 0; } /* Page wrapper for content sections */ .page-content { max-width: 920px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } /* ----------------------------------------------------------- Two-column photo + text blocks ----------------------------------------------------------- */ .photo-text { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 56px); align-items: center; padding: clamp(48px, 6vw, 72px) 0; } .photo-text.flip { direction: rtl; } .photo-text.flip > * { direction: ltr; } .photo-text-img { width: 100%; height: 340px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--line); } .pt-text h2 { font-family: var(--font-serif); font-size: clamp(1.45rem, 2.4vw, 1.7rem); font-weight: 700; color: var(--sage-deep); line-height: 1.3; margin-bottom: 16px; } .pt-label { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay); margin-bottom: 14px; } .pt-text p { font-size: 1rem; color: var(--ink-soft); margin-bottom: 14px; line-height: 1.75; } .pt-text p:last-child { margin-bottom: 0; } /* ----------------------------------------------------------- Pull quote ----------------------------------------------------------- */ .pull-quote { background: var(--sage-soft); border-left: 3px solid var(--clay); border-radius: 0 14px 14px 0; padding: 20px 24px; margin: 20px 0 0; font-family: var(--font-serif); font-style: italic; font-size: 1.02rem; color: var(--sage-deep); line-height: 1.6; font-weight: 500; } /* ----------------------------------------------------------- Full-width narrative sections ----------------------------------------------------------- */ .full-section { padding: clamp(48px, 6vw, 72px) 0; } .full-section h2 { font-family: var(--font-serif); font-size: clamp(1.55rem, 2.6vw, 2rem); font-weight: 700; color: var(--sage-deep); margin-bottom: 20px; line-height: 1.3; } .full-section p { font-size: 1.02rem; color: var(--ink-soft); margin-bottom: 16px; line-height: 1.78; } .full-section p:last-child { margin-bottom: 0; } /* Full-section image */ .full-section-img { width: 100%; height: auto; border-radius: var(--radius-lg); margin-bottom: 28px; box-shadow: var(--shadow-md); border: 1px solid var(--line); } /* ----------------------------------------------------------- Stat banner ----------------------------------------------------------- */ .stat-banner { background: var(--sage-deep); border-radius: var(--radius-lg); padding: clamp(28px, 3.5vw, 40px) clamp(28px, 3.5vw, 44px); margin: 32px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; } .stat-number { font-family: var(--font-serif); font-size: clamp(1.8rem, 3vw, 2.3rem); font-weight: 700; color: var(--clay-soft); display: block; line-height: 1; margin-bottom: 8px; } .stat-lbl { font-size: 0.82rem; color: rgba(250, 245, 234, 0.6); line-height: 1.5; } /* ----------------------------------------------------------- Impact cards ----------------------------------------------------------- */ .impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 28px 0; } .impact-card { background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; transition: transform .3s var(--t-slow), box-shadow .3s var(--t-slow); } .impact-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .impact-card svg { width: 26px; height: 26px; color: var(--clay); margin-bottom: 12px; } .impact-card p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.6; margin: 0; } /* ----------------------------------------------------------- Dark principles grid ----------------------------------------------------------- */ .principles-wrap { background: var(--sage-deep); border-radius: var(--radius-lg); padding: clamp(28px, 3.5vw, 44px); display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; margin: 28px 0; } .principle { display: flex; gap: 16px; align-items: flex-start; } .p-num { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 700; color: var(--clay-soft); line-height: 1; flex-shrink: 0; width: 34px; margin-top: 2px; } .p-title { display: block; font-size: 0.95rem; font-weight: 700; color: var(--cream-soft); margin-bottom: 4px; } .p-desc { font-size: 0.88rem; color: rgba(250, 245, 234, 0.65); line-height: 1.7; } /* ----------------------------------------------------------- CTA section ----------------------------------------------------------- */ .cta-section { background: linear-gradient(135deg, var(--sage-soft) 0%, var(--cream-soft) 50%, var(--clay-soft) 100%); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(48px, 6vw, 64px) clamp(32px, 4vw, 48px); text-align: center; margin: clamp(48px, 6vw, 72px) 0; } .cta-section h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 2.8vw, 2rem); font-weight: 700; color: var(--sage-deep); margin-bottom: 16px; } .cta-section p { font-size: 1.05rem; color: var(--ink-soft); max-width: 560px; margin: 0 auto 28px; line-height: 1.75; } .cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ----------------------------------------------------------- Responsive ----------------------------------------------------------- */ @media (max-width: 780px) { .photo-text, .photo-text.flip { grid-template-columns: 1fr; direction: ltr; gap: 28px; } .photo-text-img { height: 260px; } .stat-banner { grid-template-columns: 1fr; text-align: left; } .principles-wrap { grid-template-columns: 1fr; } .page-content { padding: 0 16px; } } @media (max-width: 720px) { .mission-hero-lead { font-size: 1rem; } .cta-section { padding: 36px 24px; } .nav-cta { display: none; } }