/* ========================================================================== Rose Development — main.css Design system: Slate & Teal — precision, craft, and visual excellence ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonts -------------------------------------------------------------------------- */ /* Font loaded via in — no @import needed here */ /* -------------------------------------------------------------------------- 2. Design Tokens -------------------------------------------------------------------------- */ :root { /* Typography */ --ff-display: 'Lato', system-ui, sans-serif; --ff-body: 'Lato', system-ui, sans-serif; /* Brand palette — Rose Development */ --clr-ink: #1A0608; --clr-slate: #2A1013; --clr-slate-mid: #3D1619; --clr-teal: #991b1e; --clr-teal-dark: #7a1518; --clr-teal-bg: #fef2f2; --clr-amber: #f8991d; --clr-amber-light: #fef3e0; /* Text */ --clr-body: #2B3545; --clr-body-muted: #5A6A7E; /* Surfaces */ --clr-white: #FFFFFF; --clr-canvas: #F6F8FA; --clr-surface: #EFF2F6; /* Borders */ --clr-border: #e8d5d5; --clr-border-dark: #c9aaaa; /* System */ --clr-success: #15803D; --clr-success-bg: #F0FDF4; --clr-error: #DC2626; --clr-error-bg: #FEF2F2; --clr-focus: #991b1e; /* Typography scale */ --t-xs: 0.75rem; /* 12 */ --t-sm: 0.875rem; /* 14 */ --t-base: 1rem; /* 16 */ --t-md: 1.125rem; /* 18 */ --t-lg: 1.25rem; /* 20 */ --t-xl: 1.5rem; /* 24 */ --t-2xl: 1.875rem; /* 30 */ --t-3xl: 2.25rem; /* 36 */ --t-4xl: 3rem; /* 48 */ --t-5xl: 3.75rem; /* 60 */ --t-6xl: 5rem; /* 80 */ /* Spacing (8px grid) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* Component tokens */ --header-h: 80px; --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-full: 0px; /* Shadows */ --shadow-xs: 0 1px 2px rgba(15,25,35,.04), 0 1px 4px rgba(15,25,35,.04); --shadow-sm: 0 1px 3px rgba(15,25,35,.06), 0 4px 12px rgba(15,25,35,.08); --shadow-md: 0 2px 8px rgba(15,25,35,.08), 0 8px 24px rgba(15,25,35,.10); --shadow-lg: 0 4px 16px rgba(15,25,35,.10), 0 16px 48px rgba(15,25,35,.14); --shadow-xl: 0 8px 24px rgba(15,25,35,.12), 0 32px 80px rgba(15,25,35,.18); /* Transitions */ --ease: cubic-bezier(.4,0,.2,1); --t-fast: 120ms; --t-base-dur: 200ms; --t-slow: 350ms; } /* -------------------------------------------------------------------------- 3. Reset & Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--ff-body); font-size: 1.0625rem; /* 17px — more comfortable than 16px */ font-weight: 400; line-height: 1.75; color: var(--clr-body); background: var(--clr-white); -webkit-font-smoothing: antialiased; /* macOS/iOS */ -moz-osx-font-smoothing: grayscale; /* macOS Firefox */ text-rendering: optimizeLegibility; /* Windows — improves kerning & hinting */ letter-spacing: 0.01em; /* Sticky footer */ display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; } img, video, svg { display: block; max-width: 100%; height: auto; } img { -webkit-user-drag: none; /* Safari: block drag */ user-drag: none; -webkit-touch-callout: none; /* iOS: block long-press save dialog */ -webkit-user-select: none; user-select: none; pointer-events: none; /* right-click hits parent, not image — no "Save image as" */ } /* Re-enable pointer events on elements that need direct click/hover on the img itself */ a > img, button > img, [data-src] > img { pointer-events: none; } /* parent handles it */ .admin-area img, #mediaModal img, .media-grid img { pointer-events: auto; } /* admin exceptions */ a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font: inherit; } table { border-collapse: collapse; } /* -------------------------------------------------------------------------- 4. Focus & Accessibility -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--clr-focus); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; top: -100%; left: var(--sp-4); padding: var(--sp-2) var(--sp-4); background: var(--clr-teal); color: var(--clr-ink); font-weight: 600; border-radius: 0 0 var(--radius) var(--radius); z-index: 9999; } .skip-link:focus { top: 0; } /* -------------------------------------------------------------------------- 5. Layout -------------------------------------------------------------------------- */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--sp-6); } .container--narrow { max-width: 760px; } .container--wide { max-width: 1400px; } .section { padding-block: var(--sp-20); } .section--sm { padding-block: var(--sp-12); } .section--lg { padding-block: var(--sp-32); } .section--dark { background: var(--clr-ink); color: var(--clr-white); } .section--slate { background: var(--clr-slate); color: var(--clr-white); } .section--canvas { background: var(--clr-canvas); } .section--teal { background: var(--clr-teal); color: var(--clr-white); } /* -------------------------------------------------------------------------- 6. Typography -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--ff-display); font-weight: 700; line-height: 1.1; color: var(--clr-ink); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4, .section--slate h1, .section--slate h2, .section--slate h3 { color: var(--clr-white); } h1 { font-size: clamp(2.25rem, 5vw, var(--t-6xl)); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; } h2 { font-size: clamp(1.75rem, 3.5vw, var(--t-4xl)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } h3 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.01em; } h4 { font-family: var(--ff-display); font-size: var(--t-lg); font-weight: 700; } h5 { font-family: var(--ff-display); font-size: var(--t-base); font-weight: 700; } p { margin-bottom: var(--sp-4); } p:last-child { margin-bottom: 0; } .lead { font-size: var(--t-md); font-weight: 300; color: var(--clr-body-muted); line-height: 1.8; } .section--dark .lead, .section--slate .lead { color: rgba(255,255,255,.72); } .eyebrow { display: inline-block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--clr-amber); margin-bottom: var(--sp-3); } .section-header { margin-bottom: var(--sp-12); } .section-header--center { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--sp-12); } .section-header h2 { margin-bottom: var(--sp-3); } /* -------------------------------------------------------------------------- 7. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.6875rem var(--sp-6); font-family: var(--ff-display); font-size: var(--t-sm); font-weight: 700; line-height: 1; border-radius: var(--radius-full); border: 2px solid transparent; transition: background var(--t-base-dur) var(--ease), color var(--t-base-dur) var(--ease), border-color var(--t-base-dur) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-base-dur) var(--ease); cursor: pointer; white-space: nowrap; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--clr-teal); color: var(--clr-white); border-color: var(--clr-teal); } .btn--primary:hover { background: var(--clr-teal-dark); border-color: var(--clr-teal-dark); } .btn--dark { background: var(--clr-ink); color: var(--clr-white); border-color: var(--clr-ink); } .btn--dark:hover { background: var(--clr-slate); border-color: var(--clr-slate); } .btn--outline { background: transparent; color: var(--clr-teal); border-color: var(--clr-teal); } .btn--outline:hover { background: var(--clr-teal); color: var(--clr-white); } .btn--ghost { background: transparent; color: var(--clr-body); border-color: var(--clr-border); } .btn--ghost:hover { background: var(--clr-canvas); border-color: var(--clr-border-dark); } .btn--ghost-light { background: rgba(255,255,255,.10); color: var(--clr-white); border-color: rgba(255,255,255,.25); } .btn--ghost-light:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); } .btn--lg { padding: 0.875rem var(--sp-8); font-size: var(--t-base); } .btn--sm { padding: 0.4375rem var(--sp-4); font-size: var(--t-xs); } .btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } /* -------------------------------------------------------------------------- 8. Forms -------------------------------------------------------------------------- */ .form-group { margin-bottom: var(--sp-5); } .form-label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--clr-body); margin-bottom: var(--sp-2); } .form-input { display: block; width: 100%; padding: 0.6875rem var(--sp-4); font-size: var(--t-base); color: var(--clr-body); background: var(--clr-white); border: 1.5px solid var(--clr-border); border-radius: var(--radius-lg); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); appearance: none; } .form-input:focus { outline: none; border-color: var(--clr-teal); box-shadow: 0 0 0 3px rgba(0,196,180,.15); } .form-input::placeholder { color: var(--clr-body-muted); } textarea.form-input { resize: vertical; min-height: 120px; } select.form-input { cursor: pointer; } .form-hint { display: block; font-size: var(--t-xs); color: var(--clr-body-muted); margin-top: var(--sp-1); } .form-required { color: var(--clr-error); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } } /* Contact/inquiry form card */ .form-card { background: var(--clr-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--sp-10); } /* -------------------------------------------------------------------------- 9. Site Header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 200; isolation: isolate; height: var(--header-h); background: var(--clr-ink); box-shadow: 0 1px 0 rgba(255,255,255,.06); transition: box-shadow var(--t-base-dur) var(--ease); } .site-header.is-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.35); } .header-inner { display: flex; align-items: center; gap: var(--sp-8); height: 100%; } /* Logo */ .site-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .site-logo__img { display: block; height: 44px; width: auto; } /* Desktop Nav */ .site-nav { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; } .site-nav__link { display: flex; align-items: center; padding: var(--sp-2) var(--sp-3); font-family: var(--ff-display); font-size: var(--t-base); font-weight: 600; color: rgba(255,255,255,.8); border-radius: var(--radius); transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); position: relative; } .site-nav__link:hover, .site-nav__link.is-active { color: var(--clr-white); background: rgba(255,255,255,.08); } /* Dropdown */ .site-nav__item--has-dropdown { position: relative; } .site-nav__dropdown { position: absolute; top: calc(100% + var(--sp-2)); left: 50%; min-width: 200px; background: var(--clr-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--clr-border); padding: var(--sp-2); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-4px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); z-index: 200; } /* Transparent bridge fills the gap so mouse stays within the hover zone */ .site-nav__item--has-dropdown::after { content: ''; position: absolute; bottom: calc(-1 * var(--sp-2)); left: 0; right: 0; height: var(--sp-2); } .site-nav__item--has-dropdown:hover .site-nav__dropdown, .site-nav__item--has-dropdown:focus-within .site-nav__dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .site-nav__dropdown-link { display: block; padding: var(--sp-2) var(--sp-3); font-family: var(--ff-display); font-size: var(--t-sm); color: var(--clr-body); border-radius: var(--radius); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .site-nav__dropdown-link:hover { background: var(--clr-canvas); color: var(--clr-teal-dark); } /* Header CTA */ .header-cta { margin-left: var(--sp-3); } /* Mobile toggle */ .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; border-radius: var(--radius); color: var(--clr-white); margin-left: auto; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background var(--t-fast) var(--ease); } .nav-toggle:hover { background: rgba(255,255,255,.08); } .nav-toggle__icon { display: flex; flex-direction: column; gap: 5px; width: 22px; } .nav-toggle__icon span { display: block; height: 2px; background: var(--clr-white); border-radius: 2px; transition: transform var(--t-base-dur) var(--ease), opacity var(--t-base-dur) var(--ease); } /* Mobile nav drawer */ .nav-drawer { position: fixed; inset: 0; z-index: 2000; visibility: hidden; } .nav-drawer.is-open { visibility: visible; } .nav-drawer__overlay { position: absolute; inset: 0; background: rgba(15,25,35,.7); opacity: 0; transition: opacity var(--t-slow) var(--ease); } .nav-drawer.is-open .nav-drawer__overlay { opacity: 1; } .nav-drawer__panel { position: absolute; right: 0; top: 0; bottom: 0; width: 300px; max-width: 90vw; background: var(--clr-slate); padding: var(--sp-8) var(--sp-6); overflow-y: auto; transform: translateX(100%); transition: transform var(--t-slow) var(--ease); } .nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); } .nav-drawer__close { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; color: var(--clr-white); font-size: var(--t-xl); border-radius: var(--radius); -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .nav-drawer__close:hover { background: rgba(255,255,255,.08); } .nav-drawer__nav { margin-top: var(--sp-10); } .nav-drawer__nav-link { display: block; padding: var(--sp-3) var(--sp-2); font-family: var(--ff-display); font-size: var(--t-md); font-weight: 600; color: rgba(255,255,255,.85); border-bottom: 1px solid rgba(255,255,255,.08); transition: color var(--t-fast) var(--ease); } .nav-drawer__nav-link:hover { color: var(--clr-teal); } .nav-drawer__nav-sub { padding-left: var(--sp-4); } .nav-drawer__nav-sub .nav-drawer__nav-link { font-size: var(--t-base); color: rgba(255,255,255,.6); } @media (max-width: 899px) { .site-nav, .header-cta { display: none; } .nav-toggle { display: flex; } } /* -------------------------------------------------------------------------- 10. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--clr-ink); color: rgba(255,255,255,.7); padding-top: var(--sp-20); padding-bottom: var(--sp-8); } /* Grid */ .footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.6fr; gap: var(--sp-12); padding-bottom: var(--sp-16); } @media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); } } /* Brand column */ .footer-brand__logo { display: inline-flex; margin-bottom: var(--sp-5); text-decoration: none; } .footer-brand__img { display: block; height: 64px; width: auto; } .footer-brand__tagline { font-family: var(--ff-display); font-size: var(--t-sm); font-weight: 400; line-height: 1.65; color: rgba(255,255,255,.55); max-width: 300px; margin: 0; } /* Column headings */ .footer-col__heading { font-family: var(--ff-display); font-size: var(--t-xs); font-weight: 700; color: var(--clr-white); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--sp-5); } /* Nav links */ .footer-nav { display: flex; flex-direction: column; gap: var(--sp-3); } .footer-nav a { font-family: var(--ff-display); font-size: var(--t-sm); font-weight: 400; color: rgba(255,255,255,.6); transition: color var(--t-fast) var(--ease); } .footer-nav a:hover { color: var(--clr-teal); } /* Contact list */ .footer-contact-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin: 0 0 var(--sp-6); padding: 0; } .footer-contact-list li { display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: var(--sp-2); font-family: var(--ff-display); font-size: var(--t-sm); font-weight: 400; color: rgba(255,255,255,.6); } .footer-contact-list li svg { margin-top: 2px; flex-shrink: 0; opacity: .7; } .footer-contact-list a { color: rgba(255,255,255,.6); text-decoration: none; transition: color var(--t-fast) var(--ease); } .footer-contact-list a:hover { color: var(--clr-teal); } .footer-contact-list__address address { font-style: normal; font-family: var(--ff-display); font-size: var(--t-sm); color: rgba(255,255,255,.6); line-height: 1.65; } /* Business registration */ .footer-registration { border-top: 1px solid rgba(255,255,255,.08); padding-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; } .footer-registration div { display: flex; gap: var(--sp-3); font-family: var(--ff-display); font-size: var(--t-xs); color: rgba(255,255,255,.35); } .footer-registration dt { font-weight: 600; min-width: 36px; color: rgba(255,255,255,.45); } .footer-registration dd { margin: 0; } /* Footer bottom bar */ .footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: var(--sp-6); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); font-family: var(--ff-display); font-size: var(--t-xs); color: rgba(255,255,255,.4); } .footer-bottom__link { color: rgba(255,255,255,.4); text-decoration: none; transition: color var(--t-fast) var(--ease); } .footer-bottom__link:hover { color: rgba(255,255,255,.8); } /* -------------------------------------------------------------------------- 11. Flash Messages -------------------------------------------------------------------------- */ .flash { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-lg); margin-bottom: var(--sp-6); font-size: var(--t-sm); } .flash--success { background: var(--clr-success-bg); color: var(--clr-success); border: 1px solid #bbf7d0; } .flash--error { background: var(--clr-error-bg); color: var(--clr-error); border: 1px solid #fecaca; } /* Legacy .alert classes (used by some partials) */ .alert { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-lg); margin-bottom: var(--sp-6); font-size: var(--t-sm); } .alert--success { background: var(--clr-success-bg); color: var(--clr-success); border: 1px solid #bbf7d0; } .alert--error { background: var(--clr-error-bg); color: var(--clr-error); border: 1px solid #fecaca; } /* -------------------------------------------------------------------------- 12. Hero Sections -------------------------------------------------------------------------- */ .hero { position: relative; background: var(--clr-ink); /* No-JS / first-paint fallback */ background-image: url('/assets/images/photos/hero-home.jpg'); background-size: cover; background-position: center 35%; color: var(--clr-white); overflow: hidden; min-height: 100vh; display: flex; align-items: center; } .hero--compact { min-height: 480px; } .hero--medium { min-height: 640px; } /* Crossfade slideshow — JS-driven */ .hero__slideshow { position: absolute; inset: 0; pointer-events: none; } .hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 2.5s ease-in-out; will-change: opacity; } .hero__slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(26,6,8,.88) 0%, rgba(26,6,8,.52) 100%); } .hero__slide--active { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } } .hero__content { position: relative; z-index: 1; padding-block: var(--sp-32); width: 100%; } .hero--compact .hero__content { padding-block: var(--sp-20); } .hero__eyebrow { margin-bottom: var(--sp-4); } .hero h1 { color: var(--clr-white); margin-bottom: var(--sp-5); } .hero .lead { color: rgba(255,255,255,.78); margin-bottom: var(--sp-8); max-width: 600px; } .hero__teal-accent { color: var(--clr-teal); } /* Page hero (for inner pages) */ .page-hero { background: var(--clr-ink); color: var(--clr-white); padding-block: var(--sp-16) var(--sp-12); position: relative; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; } .page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(26,6,8,.88) 0%, rgba(26,6,8,.60) 100%); pointer-events: none; z-index: 1; } .page-hero .container { position: relative; z-index: 2; } .page-hero h1 { color: var(--clr-white); margin-bottom: var(--sp-4); } .page-hero .lead { color: rgba(255,255,255,.72); } /* Per-page photo backgrounds */ .page-hero--about { background-image: url('/assets/images/photos/hero-about.jpg'); } .page-hero--portfolio { background-image: url('/assets/images/photos/hero-portfolio.jpg'); background-position: center 40%; } .page-hero--news { background-image: url('/assets/images/photos/hero-news.jpg'); background-position: center 55%; } .page-hero--services { background-image: url('/assets/images/photos/hero-services.jpg'); background-position: center 60%; } .page-hero--software-development { background-image: url('/assets/images/photos/hero-software.jpg'); background-position: center 55%; } .page-hero--graphic-design { background-image: url('/assets/images/photos/hero-design.jpg'); background-position: center 30%; } .page-hero--photography { background-image: url('/assets/images/photos/hero-photography.jpg'); background-position: center 45%; } /* Breadcrumb */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--t-sm); color: var(--clr-body-muted); margin-bottom: var(--sp-6); } .breadcrumb a { color: var(--clr-body-muted); transition: color var(--t-fast) var(--ease); } .breadcrumb a:hover { color: var(--clr-teal); } .breadcrumb__sep { opacity: .4; } .page-hero .breadcrumb { color: rgba(255,255,255,.5); } .page-hero .breadcrumb a { color: rgba(255,255,255,.5); } .page-hero .breadcrumb a:hover { color: var(--clr-teal); } /* -------------------------------------------------------------------------- 13. Cards -------------------------------------------------------------------------- */ .card { background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); overflow: hidden; transition: box-shadow var(--t-base-dur) var(--ease), transform var(--t-base-dur) var(--ease); } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .card__body { padding: var(--sp-6); } .card__footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--clr-border); } /* -------------------------------------------------------------------------- 14. Portfolio Grid & Cards -------------------------------------------------------------------------- */ .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } @media (max-width: 899px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .portfolio-grid { grid-template-columns: 1fr; } } /* Portfolio card — sharp, editorial */ .portfolio-card { border-radius: 0; overflow: hidden; background: var(--clr-white); border: 1px solid var(--clr-border); border-bottom: 3px solid transparent; transition: border-color var(--t-base-dur) var(--ease); } .portfolio-card:hover { border-bottom-color: var(--clr-teal); box-shadow: none; } .portfolio-card__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--clr-slate); position: relative; } .portfolio-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .portfolio-card:hover .portfolio-card__img { transform: scale(1.04); } .portfolio-card__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--clr-slate) 0%, var(--clr-slate-mid) 100%); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.15); font-size: 2.5rem; } .portfolio-card__badge { position: absolute; top: var(--sp-3); left: 0; padding: 4px var(--sp-3); background: var(--clr-teal); color: var(--clr-white); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 0; } .portfolio-card__body { padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); border-top: 1px solid var(--clr-border); } .portfolio-card__title { font-family: var(--ff-display); font-size: var(--t-base); font-weight: 700; color: var(--clr-ink); margin-bottom: var(--sp-1); line-height: 1.3; } .portfolio-card__title a { color: inherit; transition: color var(--t-fast) var(--ease); } .portfolio-card__title a:hover { color: var(--clr-teal); } .portfolio-card__client { font-size: var(--t-xs); color: var(--clr-teal); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 0; } .portfolio-card__arrow { flex-shrink: 0; width: 34px; height: 34px; border: 1.5px solid var(--clr-border); border-radius: 0; display: flex; align-items: center; justify-content: center; color: var(--clr-body-muted); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .portfolio-card:hover .portfolio-card__arrow { border-color: var(--clr-teal); background: var(--clr-teal); color: var(--clr-white); } .portfolio-card__arrow svg { width: 14px; height: 14px; } /* Dark-section card overrides */ .section--dark .portfolio-card { background: var(--clr-slate); border-color: rgba(255,255,255,.1); border-bottom-color: transparent; } .section--dark .portfolio-card:hover { border-bottom-color: var(--clr-teal); } .section--dark .portfolio-card__body { border-top-color: rgba(255,255,255,.08); } .section--dark .portfolio-card__title { color: var(--clr-white); } .section--dark .portfolio-card__title a:hover { color: var(--clr-teal); } .section--dark .portfolio-card__client { color: var(--clr-teal); } .section--dark .portfolio-card__arrow { border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.5); } .section--dark .portfolio-card:hover .portfolio-card__arrow { border-color: var(--clr-teal); background: var(--clr-teal); color: var(--clr-white); } /* Homepage portfolio grid */ .home-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-6); } /* Portfolio filters — tab-style, no pill shapes */ .portfolio-filters { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: var(--sp-10); border-bottom: 2px solid var(--clr-border); } .portfolio-filter-btn { padding: var(--sp-3) var(--sp-6); font-size: var(--t-sm); font-weight: 600; color: var(--clr-body-muted); border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 0; background: transparent; cursor: pointer; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); letter-spacing: .02em; } .portfolio-filter-btn:hover { color: var(--clr-ink); } .portfolio-filter-btn.is-active { color: var(--clr-teal); border-bottom-color: var(--clr-teal); background: transparent; } /* Portfolio item single */ .portfolio-hero { position: relative; min-height: 560px; display: flex; align-items: flex-end; background: var(--clr-ink); overflow: hidden; } .portfolio-hero--photo { min-height: 560px; align-items: flex-end; } .portfolio-hero__bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: .45; } .portfolio-hero--photo .portfolio-hero__bg { opacity: .82; object-position: center center; } .portfolio-hero--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.0) 40%, rgba(0,0,0,.55) 100%); pointer-events: none; } /* Photography portfolio full-bleed image strip */ .photo-portfolio-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 3px; } @media (max-width: 860px) { .photo-portfolio-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .photo-portfolio-strip { grid-template-columns: 1fr; } } .photo-portfolio-strip .photo-album__item { aspect-ratio: 3 / 2; } .portfolio-hero__content { position: relative; z-index: 1; padding-block: var(--sp-16); width: 100%; } .portfolio-hero h1 { color: var(--clr-white); } .portfolio-hero .breadcrumb { color: rgba(255,255,255,.6); } .portfolio-hero .breadcrumb a { color: var(--clr-teal); } .portfolio-hero .breadcrumb a:hover { color: var(--clr-white); } .portfolio-hero .breadcrumb__sep { color: rgba(255,255,255,.35); } .portfolio-hero .breadcrumb [aria-current] { color: rgba(255,255,255,.7); } .portfolio-meta { display: flex; flex-wrap: wrap; gap: var(--sp-6); padding-block: var(--sp-8); border-bottom: 1px solid var(--clr-border); margin-bottom: var(--sp-10); } .portfolio-meta__item { min-width: 120px; } .portfolio-meta__label { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--clr-teal); margin-bottom: var(--sp-1); } .portfolio-meta__value { font-size: var(--t-sm); font-weight: 500; color: var(--clr-body); } .tech-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .tech-tag { display: inline-block; padding: 3px var(--sp-3); background: var(--clr-canvas); border: 1px solid var(--clr-border); border-radius: var(--radius-full); font-size: var(--t-xs); font-weight: 500; color: var(--clr-body); } /* Portfolio item gallery — uniform grid, images fill cells */ .portfolio-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #c8ccd4; margin-block: var(--sp-10); } @media (max-width: 860px) { .portfolio-gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .portfolio-gallery { grid-template-columns: 1fr; } } /* Reset .photo-album__item overrides inside the portfolio gallery */ #photoAlbum.portfolio-gallery .portfolio-gallery__item, #photoAlbum.portfolio-gallery .portfolio-gallery__item:hover { display: block !important; aspect-ratio: 4 / 3 !important; overflow: hidden !important; cursor: zoom-in !important; background: #fff !important; padding: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; z-index: auto !important; transition: none !important; } #photoAlbum.portfolio-gallery .portfolio-gallery__item::before, #photoAlbum.portfolio-gallery .portfolio-gallery__item::after { display: none !important; content: none !important; } #photoAlbum.portfolio-gallery .portfolio-gallery__item img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; border-radius: 0 !important; transition: none !important; transform: none !important; filter: none !important; opacity: 1 !important; } /* -------------------------------------------------------------------------- 14b. Photo Strip (homepage marquee) -------------------------------------------------------------------------- */ .photo-strip { overflow: hidden; background: var(--clr-ink); padding-block: 0; margin-top: 0; cursor: default; } .photo-strip__track { display: flex; gap: 0; width: max-content; will-change: transform; animation: photo-strip-scroll var(--strip-duration, 120s) linear infinite; } .photo-strip:hover .photo-strip__track { animation-play-state: paused; } .photo-strip__track img { height: 260px; width: auto; object-fit: cover; flex-shrink: 0; display: block; opacity: .85; transition: opacity .3s; border-right: 2px solid #c8cdd6; } .photo-strip__track img:hover { opacity: 1; } @keyframes photo-strip-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .photo-strip__track { animation: none; } } /* -------------------------------------------------------------------------- 15. Disciplines Strip -------------------------------------------------------------------------- */ .disciplines-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } @media (max-width: 799px) { .disciplines-strip { grid-template-columns: 1fr; gap: var(--sp-4); } } .discipline-tile { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-8); background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 0; transition: border-color var(--t-base-dur) var(--ease); } .discipline-tile:hover { border-color: var(--clr-teal); } .discipline-tile__icon { width: 52px; height: 52px; background: none; border-radius: 0; display: flex; align-items: center; justify-content: center; color: var(--clr-teal-dark); font-size: 1.5rem; } .discipline-tile h3 { font-size: var(--t-lg); margin-bottom: var(--sp-2); } .discipline-tile p { font-size: var(--t-sm); color: var(--clr-body-muted); flex: 1; } .discipline-tile__link { font-size: var(--t-sm); font-weight: 600; color: var(--clr-teal-dark); display: inline-flex; align-items: center; gap: var(--sp-1); transition: gap var(--t-fast) var(--ease); } .discipline-tile:hover .discipline-tile__link { gap: var(--sp-2); } /* -------------------------------------------------------------------------- 16. Service Pages -------------------------------------------------------------------------- */ .service-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: start; padding-block: var(--sp-20); } @media (max-width: 799px) { .service-intro { grid-template-columns: 1fr; gap: var(--sp-10); } } .service-points { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); } .service-point { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--t-base); color: var(--clr-body); } .service-point::before { content: ''; flex-shrink: 0; width: 8px; height: 8px; background: var(--clr-teal); border-radius: 50%; margin-top: 0.55em; } .service-process { padding-block: var(--sp-20); background: var(--clr-canvas); } .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); margin-top: var(--sp-10); } @media (max-width: 899px) { .process-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .process-steps { grid-template-columns: 1fr; } } .process-step { position: relative; padding: var(--sp-6); background: var(--clr-white); border-radius: var(--radius-xl); border: 1px solid var(--clr-border); } .process-step__num { font-family: var(--ff-display); font-size: var(--t-4xl); font-weight: 800; color: var(--clr-teal-bg); line-height: 1; margin-bottom: var(--sp-4); } .process-step h4 { margin-bottom: var(--sp-2); } .process-step p { font-size: var(--t-sm); color: var(--clr-body-muted); margin-bottom: 0; } /* Graphic Design service — editorial overrides */ .gd-disciplines { background: var(--clr-ink); padding-block: var(--sp-20); } .gd-disciplines__header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-6); padding-bottom: var(--sp-10); border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 0; } .gd-disciplines__header h2 { color: #fff; font-size: clamp(1.75rem,3vw,2.25rem); margin: 0; } .gd-disciplines__header p { color: rgba(255,255,255,.4); font-size: var(--t-sm); max-width: 38ch; text-align: right; margin: 0; } .gd-discipline-row { display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: var(--sp-8); padding-block: var(--sp-7); border-bottom: 1px solid rgba(255,255,255,.08); transition: padding-left .25s ease, border-color .25s ease; cursor: default; } .gd-discipline-row:hover { padding-left: var(--sp-5); border-bottom-color: rgba(255,255,255,.25); } .gd-discipline-row__num { font-size: var(--t-xs); color: rgba(255,255,255,.25); letter-spacing: .12em; font-weight: 600; } .gd-discipline-row__name { font-size: clamp(1.5rem,3.5vw,2.625rem); font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1; transition: color .25s; } .gd-discipline-row:hover .gd-discipline-row__name { color: var(--clr-teal); } .gd-discipline-row__desc { font-size: var(--t-sm); color: rgba(255,255,255,.35); text-align: right; } .gd-statement { background: #fff; padding-block: var(--sp-20); } .gd-statement__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16) var(--sp-20); align-items: start; } .gd-statement__title { font-size: clamp(2.25rem,5vw,3.5rem); line-height: 1.0; letter-spacing: -.04em; margin-bottom: 0; } .gd-process { background: var(--clr-slate); padding-block: var(--sp-20); } .gd-process__header { margin-bottom: var(--sp-12); } .gd-process__header h2 { color: #fff; font-size: clamp(2rem,4vw,3rem); letter-spacing: -.03em; } .gd-process-step { display: grid; grid-template-columns: 8rem 1fr 2fr; gap: 0 var(--sp-12); align-items: start; padding-block: var(--sp-10); border-top: 1px solid rgba(255,255,255,.1); } .gd-process-step__num { font-size: clamp(5rem,9vw,7rem); font-weight: 900; color: rgba(255,255,255,.06); line-height: .85; letter-spacing: -.05em; } .gd-process-step__title { color: #fff; font-size: clamp(1.25rem,2.5vw,1.875rem); font-weight: 700; margin: 0; letter-spacing: -.02em; padding-top: .2rem; } .gd-process-step__desc { color: rgba(255,255,255,.5); margin: 0; padding-top: .35rem; font-size: var(--t-base); line-height: 1.65; } @media (max-width: 799px) { .gd-disciplines__header p { text-align: left; } .gd-discipline-row { grid-template-columns: 2.5rem 1fr; gap: var(--sp-4); } .gd-discipline-row__desc { display: none; } .gd-discipline-row__name { font-size: clamp(1.25rem,6vw,2rem); } .gd-statement__grid { grid-template-columns: 1fr; gap: var(--sp-10); } .gd-process-step { grid-template-columns: 1fr; gap: var(--sp-3); padding-block: var(--sp-8); } .gd-process-step__num { font-size: 4.5rem; line-height: 1; } } /* Photography service — cinematic overrides */ .ph-disciplines { background: var(--clr-ink); padding-block: var(--sp-20); } .ph-disciplines__header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-6); padding-bottom: var(--sp-10); border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 0; } .ph-disciplines__header h2 { color: #fff; font-size: clamp(1.75rem,3vw,2.25rem); margin: 0; } .ph-disciplines__header p { color: rgba(255,255,255,.4); font-size: var(--t-sm); max-width: 38ch; text-align: right; margin: 0; } .ph-discipline-row { display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: var(--sp-8); padding-block: var(--sp-7); border-bottom: 1px solid rgba(255,255,255,.08); transition: padding-left .25s ease, border-color .25s ease; cursor: default; } .ph-discipline-row:hover { padding-left: var(--sp-5); border-bottom-color: rgba(255,255,255,.25); } .ph-discipline-row__num { font-size: var(--t-xs); color: rgba(255,255,255,.25); letter-spacing: .12em; font-weight: 600; } .ph-discipline-row__name { font-size: clamp(1.5rem,3.5vw,2.625rem); font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1; transition: color .25s; } .ph-discipline-row:hover .ph-discipline-row__name { color: var(--clr-amber, #E8A838); } .ph-discipline-row__desc { font-size: var(--t-sm); color: rgba(255,255,255,.35); text-align: right; } .ph-statement { background: var(--clr-slate); padding-block: var(--sp-20); } .ph-statement__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16) var(--sp-20); align-items: center; } .ph-statement__quote { font-size: clamp(2.25rem,5vw,3.75rem); font-weight: 900; line-height: 1.0; letter-spacing: -.04em; color: #fff; margin: 0; } .ph-statement__quote em { color: var(--clr-teal); font-style: normal; } .ph-process { background: var(--clr-ink); padding-block: var(--sp-20); } .ph-process__header { margin-bottom: var(--sp-12); } .ph-process__header h2 { color: #fff; font-size: clamp(2rem,4vw,3rem); letter-spacing: -.03em; } .ph-process-steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.15); } .ph-process-step { padding: var(--sp-8) var(--sp-6) var(--sp-8) 0; border-right: 1px solid rgba(255,255,255,.1); padding-right: var(--sp-8); } .ph-process-step:last-child { border-right: none; } .ph-process-step__num { display: block; font-size: var(--t-xs); color: var(--clr-teal); letter-spacing: .15em; font-weight: 700; margin-bottom: var(--sp-5); } .ph-process-step__title { color: #fff; font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--sp-3); } .ph-process-step p { color: rgba(255,255,255,.45); font-size: var(--t-sm); margin: 0; line-height: 1.6; } @media (max-width: 799px) { .ph-disciplines__header p { text-align: left; } .ph-discipline-row { grid-template-columns: 2.5rem 1fr; gap: var(--sp-4); } .ph-discipline-row__desc { display: none; } .ph-discipline-row__name { font-size: clamp(1.25rem,6vw,2rem); } .ph-statement__inner { grid-template-columns: 1fr; gap: var(--sp-10); } .ph-process-steps { grid-template-columns: 1fr 1fr; } .ph-process-step { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); padding: var(--sp-6) 0; } .ph-process-step:last-child { border-bottom: none; } } /* Tools grid (software service) */ .tools-grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); } .tool-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: var(--clr-ink); color: var(--clr-teal); font-family: var(--ff-body); font-size: var(--t-sm); font-weight: 600; border-radius: var(--radius-full); border: 1px solid rgba(0,196,180,.2); } /* -------------------------------------------------------------------------- 17. About Page -------------------------------------------------------------------------- */ .about-mission { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; padding-block: var(--sp-20); } @media (max-width: 799px) { .about-mission { grid-template-columns: 1fr; gap: var(--sp-10); } } .about-expertise { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } @media (max-width: 799px) { .about-expertise { grid-template-columns: 1fr; gap: var(--sp-4); } } .expertise-card { padding: var(--sp-6); background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); } .expertise-card__icon { width: 44px; height: 44px; background: none; border-radius: 0; display: flex; align-items: center; justify-content: center; color: var(--clr-teal-dark); margin-bottom: var(--sp-4); font-size: 1.25rem; } .expertise-card h3 { font-size: var(--t-lg); margin-bottom: var(--sp-3); } .expertise-list { display: flex; flex-direction: column; gap: var(--sp-2); } .expertise-list li { font-size: var(--t-sm); color: var(--clr-body-muted); display: flex; align-items: center; gap: var(--sp-2); } .expertise-list li::before { content: ''; width: 6px; height: 6px; background: var(--clr-teal); border-radius: 50%; flex-shrink: 0; } /* Values grid */ .values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); margin-top: var(--sp-10); } @media (max-width: 899px) { .values-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 499px) { .values-grid { grid-template-columns: 1fr; } } .value-item { text-align: center; padding: var(--sp-6); } .value-item__icon { font-size: 2rem; margin-bottom: var(--sp-4); } .value-item h4 { margin-bottom: var(--sp-2); font-size: var(--t-base); } .value-item p { font-size: var(--t-sm); color: var(--clr-body-muted); margin-bottom: 0; } /* -------------------------------------------------------------------------- 18. News / Articles -------------------------------------------------------------------------- */ .article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } @media (max-width: 899px) { .article-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .article-grid { grid-template-columns: 1fr; } } .article-card { border-radius: var(--radius-xl); overflow: hidden; background: var(--clr-white); border: 1px solid var(--clr-border); display: flex; flex-direction: column; transition: box-shadow var(--t-base-dur) var(--ease), transform var(--t-base-dur) var(--ease); } .article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .article-card__thumb { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--clr-slate); } .article-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); } .article-card:hover .article-card__thumb img { transform: scale(1.04); } .article-card__body { padding: var(--sp-5); flex: 1; display: flex; flex-direction: column; } .article-card__meta { font-size: var(--t-xs); color: var(--clr-body-muted); margin-bottom: var(--sp-2); } .article-card__title { font-family: var(--ff-display); font-size: var(--t-lg); font-weight: 700; color: var(--clr-ink); line-height: 1.3; margin-bottom: var(--sp-2); } .article-card__title a { color: inherit; transition: color var(--t-fast) var(--ease); } .article-card__title a:hover { color: var(--clr-teal-dark); } .article-card__excerpt { font-size: var(--t-sm); color: var(--clr-body-muted); line-height: 1.6; flex: 1; margin-bottom: var(--sp-4); } .article-card__link { font-size: var(--t-sm); font-weight: 600; color: var(--clr-teal-dark); display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: auto; } /* Article single */ .article-content { max-width: 760px; margin-inline: auto; padding-block: var(--sp-12); } .article-header { margin-bottom: var(--sp-10); } .article-cover { width: 100%; max-height: 500px; object-fit: cover; border-radius: var(--radius-xl); margin-bottom: var(--sp-10); } /* -------------------------------------------------------------------------- 19. Prose (rich text content) -------------------------------------------------------------------------- */ .prose { font-size: 1.0625rem; font-weight: 400; line-height: 1.85; color: var(--clr-body); letter-spacing: 0.01em; } .prose h2 { font-family: var(--ff-display); font-size: var(--t-3xl); margin-top: var(--sp-12); margin-bottom: var(--sp-5); color: var(--clr-ink); } .prose h3 { font-family: var(--ff-display); font-size: var(--t-xl); margin-top: var(--sp-10); margin-bottom: var(--sp-4); color: var(--clr-ink); } .prose h4 { font-family: var(--ff-body); font-size: var(--t-lg); font-weight: 600; margin-top: var(--sp-8); margin-bottom: var(--sp-3); } .prose p { margin-bottom: var(--sp-5); } .prose ul, .prose ol { padding-left: var(--sp-6); margin-bottom: var(--sp-5); } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-bottom: var(--sp-2); } .prose a { color: var(--clr-teal-dark); text-decoration: underline; } .prose a:hover { color: var(--clr-teal); } .prose strong { font-weight: 600; color: var(--clr-ink); } .prose img { border-radius: var(--radius-lg); margin-block: var(--sp-8); } .prose blockquote { border-left: 4px solid var(--clr-teal); padding-left: var(--sp-6); margin-block: var(--sp-8); font-style: italic; color: var(--clr-body-muted); } .prose code { background: var(--clr-canvas); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); padding: 2px 6px; font-size: 0.875em; } .prose pre { background: var(--clr-ink); color: #e5e7eb; padding: var(--sp-6); border-radius: var(--radius-lg); overflow-x: auto; margin-block: var(--sp-6); } .prose pre code { background: none; border: none; padding: 0; } /* -------------------------------------------------------------------------- 20. Testimonials -------------------------------------------------------------------------- */ .pullquote { text-align: center; max-width: 760px; margin-inline: auto; padding-block: var(--sp-12); } .pullquote__mark { font-family: var(--ff-display); font-size: 6rem; line-height: 0.6; color: var(--clr-teal); margin-bottom: var(--sp-6); display: block; } .pullquote blockquote { font-family: var(--ff-display); font-size: clamp(1.25rem, 2.5vw, var(--t-3xl)); font-weight: 600; line-height: 1.3; color: var(--clr-white); margin-bottom: var(--sp-6); } .pullquote__author { font-size: var(--t-sm); color: rgba(255,255,255,.6); } .pullquote__author strong { display: block; font-weight: 600; color: var(--clr-white); } /* Testimonial strip */ .testimonials-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } @media (max-width: 899px) { .testimonials-strip { grid-template-columns: 1fr; max-width: 500px; } } .testimonial-card { background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); padding: var(--sp-6); } .testimonial-card__quote { font-size: var(--t-base); line-height: 1.65; color: var(--clr-body); margin-bottom: var(--sp-5); font-style: italic; } .testimonial-card__author { display: flex; align-items: center; gap: var(--sp-3); } .testimonial-card__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--clr-slate); object-fit: cover; flex-shrink: 0; } .testimonial-card__name { font-weight: 600; font-size: var(--t-sm); color: var(--clr-ink); display: block; } .testimonial-card__role { font-size: var(--t-xs); color: var(--clr-body-muted); } /* -------------------------------------------------------------------------- 21. CTA Banner -------------------------------------------------------------------------- */ .cta-banner { background: linear-gradient(135deg, var(--clr-slate) 0%, var(--clr-ink) 100%); color: var(--clr-white); text-align: center; padding-block: var(--sp-20); } .cta-banner h2 { color: var(--clr-white); margin-bottom: var(--sp-4); } .cta-banner p { color: rgba(255,255,255,.72); font-size: var(--t-md); margin-bottom: var(--sp-8); max-width: 540px; margin-inline: auto; } .cta-banner .btn-group { justify-content: center; } .cta-banner--teal { background: linear-gradient(135deg, var(--clr-teal-dark) 0%, var(--clr-teal) 100%); color: var(--clr-ink); } .cta-banner--teal h2 { color: var(--clr-ink); } .cta-banner--teal p { color: rgba(15,25,35,.65); } /* -------------------------------------------------------------------------- 22. Contact Page -------------------------------------------------------------------------- */ /* Hero */ .contact-hero { background: var(--clr-ink); background-image: url('/assets/images/photos/hero-contact.jpg'); background-size: cover; background-position: center 40%; color: var(--clr-white); padding-block: var(--sp-20) var(--sp-16); text-align: center; position: relative; overflow: hidden; } .contact-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,6,8,.78) 0%, rgba(26,6,8,.65) 100%); pointer-events: none; z-index: 1; } .contact-hero .container { position: relative; z-index: 2; } .contact-hero h1 { color: var(--clr-white); margin-bottom: var(--sp-4); } .contact-hero__lead { font-family: var(--ff-display); font-size: var(--t-md); color: rgba(255,255,255,.65); max-width: 540px; margin-inline: auto; } /* Info bar */ .contact-bar { background: var(--clr-slate); border-top: 3px solid var(--clr-teal); border-bottom: 1px solid rgba(255,255,255,.06); } .contact-bar__grid { display: grid; grid-template-columns: repeat(4, 1fr); divide-x: 1px solid rgba(255,255,255,.08); } @media (max-width: 899px) { .contact-bar__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .contact-bar__grid { grid-template-columns: 1fr; } } .contact-bar__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); color: rgba(255,255,255,.75); text-decoration: none; border-right: 1px solid rgba(255,255,255,.07); transition: background var(--t-fast) var(--ease); } .contact-bar__item:last-child { border-right: none; } a.contact-bar__item:hover { background: rgba(255,255,255,.04); color: var(--clr-white); } .contact-bar__icon { width: 38px; height: 38px; background: rgba(153,27,30,.25); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--clr-teal); flex-shrink: 0; } .contact-bar__label { display: block; font-family: var(--ff-display); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.45); margin-bottom: 2px; } .contact-bar__value { display: block; font-family: var(--ff-display); font-size: var(--t-sm); font-weight: 500; color: rgba(255,255,255,.85); } /* Main layout — split panel: white left / dark right */ .contact-main { background: var(--clr-white); } .contact-body { display: grid; grid-template-columns: 1fr clamp(400px, 38%, 520px); min-height: 720px; align-items: stretch; } @media (max-width: 1024px) { .contact-body { grid-template-columns: 1fr; min-height: auto; } } /* Form column — white, padded */ .contact-form-col { padding: var(--sp-16) var(--sp-12); border-right: 1px solid var(--clr-border); } @media (max-width: 1024px) { .contact-form-col { padding: var(--sp-10) var(--sp-6); border-right: none; border-bottom: 1px solid var(--clr-border); } } .contact-form-wrap { max-width: 560px; margin-inline: auto; } .contact-form-head { margin-bottom: var(--sp-8); padding-left: var(--sp-5); border-left: 4px solid var(--clr-teal); } .contact-form-head h2 { font-size: var(--t-3xl); margin-bottom: var(--sp-2); } .contact-form-head p { font-family: var(--ff-display); color: var(--clr-body-muted); font-size: var(--t-sm); margin: 0; } /* New form styles: cform */ .cform { display: flex; flex-direction: column; gap: var(--sp-5); } .cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } @media (max-width: 600px) { .cform__row { grid-template-columns: 1fr; } } .cform__group { display: flex; flex-direction: column; gap: var(--sp-1); } .cform__label { font-family: var(--ff-display); font-size: var(--t-sm); font-weight: 600; color: var(--clr-body); } .cform__req { color: var(--clr-teal); margin-left: 2px; } .cform__input { font-family: var(--ff-display); font-size: var(--t-sm); color: var(--clr-body); background: var(--clr-white); border: 1.5px solid var(--clr-border); border-radius: var(--radius); padding: 0.7rem var(--sp-4); width: 100%; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .cform__input:focus { outline: none; border-color: var(--clr-teal); box-shadow: 0 0 0 3px rgba(153,27,30,.12); } .cform__textarea { resize: vertical; min-height: 140px; line-height: 1.6; } .cform__group--error .cform__input { border-color: var(--clr-error); } .cform__error { font-family: var(--ff-display); font-size: var(--t-xs); color: var(--clr-error); } /* Service radio button group */ .cform__service-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); } .cform__service-option { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3); border: 1.5px solid var(--clr-border); border-radius: var(--radius); font-family: var(--ff-display); font-size: var(--t-sm); font-weight: 500; color: var(--clr-body-muted); cursor: pointer; background: var(--clr-white); transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); user-select: none; } .cform__service-option input[type="radio"] { display: none; } .cform__service-option svg { opacity: .55; transition: opacity var(--t-fast) var(--ease); flex-shrink: 0; } .cform__service-option:hover { border-color: var(--clr-teal); color: var(--clr-teal); background: var(--clr-teal-bg); } .cform__service-option:hover svg { opacity: 1; } .cform__service-option.is-selected, .cform__service-option:has(input:checked) { border-color: var(--clr-teal); background: var(--clr-teal-bg); color: var(--clr-teal); font-weight: 600; } .cform__service-option.is-selected svg, .cform__service-option:has(input:checked) svg { opacity: 1; } .cform__footer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); } .cform__submit { display: flex; align-items: center; gap: var(--sp-2); padding: 0.875rem var(--sp-8); font-size: var(--t-base); border-radius: var(--radius); } .cform__privacy { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--ff-display); font-size: var(--t-xs); color: var(--clr-body-muted); margin: 0; } .cform__privacy svg { flex-shrink: 0; opacity: .6; } /* Side column — dark panel */ .contact-side-col { background: var(--clr-slate); display: flex; flex-direction: column; } /* Map — iframe fills the top portion */ .contact-map { width: 100%; height: 300px; flex-shrink: 0; overflow: hidden; border-bottom: 3px solid var(--clr-teal); } /* Address card — dark */ .contact-address-card { flex: 1; padding: var(--sp-8) var(--sp-6); display: flex; flex-direction: column; justify-content: space-between; } .contact-address-card__inner { display: flex; flex-direction: column; gap: var(--sp-6); } .contact-address-card__heading { font-family: var(--ff-display); font-size: var(--t-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--clr-teal); margin-bottom: var(--sp-3); } .contact-address-card__address { font-style: normal; font-family: var(--ff-display); font-size: var(--t-sm); color: rgba(255,255,255,.8); line-height: 1.8; } .contact-address-card__address strong { display: block; color: var(--clr-white); font-size: var(--t-base); font-weight: 700; margin-bottom: var(--sp-1); } .contact-address-card__reg { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-4) 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); margin: 0; } .contact-address-card__reg div { display: flex; gap: var(--sp-3); font-family: var(--ff-display); font-size: var(--t-xs); color: rgba(255,255,255,.5); } .contact-address-card__reg dt { font-weight: 700; min-width: 32px; color: rgba(255,255,255,.6); } .contact-address-card__reg dd { margin: 0; } .contact-address-card__note { margin-top: var(--sp-5); font-family: var(--ff-display); font-size: var(--t-xs); color: rgba(255,255,255,.4); line-height: 1.65; } /* -------------------------------------------------------------------------- 23. Badges -------------------------------------------------------------------------- */ .badge { display: inline-block; padding: 3px var(--sp-3); font-size: var(--t-xs); font-weight: 600; border-radius: var(--radius-full); line-height: 1.4; } .badge--teal { background: var(--clr-teal-bg); color: var(--clr-teal-dark); } .badge--amber { background: var(--clr-amber-light); color: #92650e; } .badge--neutral { background: var(--clr-canvas); color: var(--clr-body-muted); border: 1px solid var(--clr-border); } .badge--success { background: var(--clr-success-bg); color: var(--clr-success); } .badge--error { background: var(--clr-error-bg); color: var(--clr-error); } .badge--dark { background: rgba(0,0,0,.45); color: var(--clr-teal); border: 1px solid var(--clr-teal); } /* -------------------------------------------------------------------------- 24. Pagination -------------------------------------------------------------------------- */ .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); padding-top: var(--sp-10); } .pagination__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; } .pagination__item { display: contents; } .pagination__link, .pagination__current { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding-inline: var(--sp-3); border-radius: var(--radius); font-size: var(--t-sm); font-weight: 500; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .pagination__link { color: var(--clr-body); border: 1px solid var(--clr-border); background: var(--clr-white); } .pagination__link:hover { background: var(--clr-canvas); border-color: var(--clr-border-dark); } .pagination__current { background: var(--clr-teal); color: var(--clr-ink); font-weight: 600; border: 1px solid var(--clr-teal); } .pagination__ellipsis { padding-inline: var(--sp-2); color: var(--clr-body-muted); } /* -------------------------------------------------------------------------- 25. Utilities -------------------------------------------------------------------------- */ .text-teal { color: var(--clr-teal); } .text-amber { color: var(--clr-amber); } .text-muted { color: var(--clr-body-muted); } .text-white { color: var(--clr-white); } .text-center { text-align: center; } .text-sm { font-size: var(--t-sm); } .mt-auto { margin-top: auto; } .mb-0 { margin-bottom: 0 !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Divider */ .divider { border: none; border-top: 1px solid var(--clr-border); margin-block: var(--sp-10); } /* Two-col text grid */ .two-col-text { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); } @media (max-width: 799px) { .two-col-text { grid-template-columns: 1fr; gap: var(--sp-8); } } /* Image aspect wrappers */ .aspect-16-9 { aspect-ratio: 16/9; overflow: hidden; } .aspect-4-3 { aspect-ratio: 4/3; overflow: hidden; } .aspect-1-1 { aspect-ratio: 1/1; overflow: hidden; } .cover-img { width: 100%; height: 100%; object-fit: cover; } /* Decorative teal bar */ .teal-bar { display: block; width: 48px; height: 4px; background: var(--clr-teal); border-radius: 2px; margin-bottom: var(--sp-5); } /* -------------------------------------------------------------------------- 26. Responsive helpers -------------------------------------------------------------------------- */ @media (max-width: 899px) { .hide-md { display: none !important; } } @media (max-width: 599px) { .hide-sm { display: none !important; } .section { padding-block: var(--sp-12); } .section--lg { padding-block: var(--sp-20); } } /* -------------------------------------------------------------------------- 27. Mobile — comprehensive overrides (≤599px) -------------------------------------------------------------------------- */ @media (max-width: 599px) { /* --- Typography scale-down --- */ h1 { font-size: clamp(1.75rem, 7.5vw, 2.25rem); letter-spacing: -.02em; line-height: 1.1; } h2 { font-size: clamp(1.375rem, 6.5vw, 1.875rem); } h3 { font-size: clamp(1.125rem, 5.5vw, 1.375rem); } /* --- Hero --- */ .hero { min-height: 100svh; align-items: flex-end; } .hero__content { padding-block: var(--sp-20) var(--sp-16); } .hero .lead { font-size: var(--t-sm); margin-bottom: var(--sp-6); max-width: 100%; } .hero .btn-group { flex-direction: column; align-items: stretch; gap: var(--sp-3); } .hero .btn-group .btn { justify-content: center; width: 100%; } /* --- Page hero inner pages --- */ .page-hero { padding-block: var(--sp-12) var(--sp-10); } /* --- Contact hero --- */ .contact-hero { padding-block: var(--sp-12) var(--sp-10); } /* --- Eyebrow labels --- */ .eyebrow { font-size: 0.65rem; } /* --- Section headers --- */ .section-header--center .lead { font-size: var(--t-sm); } /* --- Disciplines strip --- */ .discipline-tile { padding: var(--sp-6); } /* --- CTA banner --- */ .cta-banner h2 { font-size: var(--t-2xl); } .cta-banner .btn-group { flex-direction: column; align-items: stretch; } .cta-banner .btn-group .btn { justify-content: center; } /* --- Footer --- */ .footer-brand__img { height: 48px; } /* --- Container padding --- */ .container { padding-inline: var(--sp-4); } /* --- Contact bar --- */ .contact-bar__item { padding: var(--sp-3) var(--sp-4); } .contact-bar__label { font-size: 0.6rem; } .contact-bar__value { font-size: var(--t-xs); } .contact-bar__icon { width: 28px; height: 28px; } /* --- Pullquote / testimonial --- */ .pullquote blockquote { font-size: var(--t-md); } } /* ── 28. Photo Album & Lightbox ─────────────────────────────────────────── */ /* Section background */ .photo-album-section { background: var(--clr-ink); } /* Masonry-style justified grid */ .photo-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; } @media (min-width: 768px) { .photo-album { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; } } @media (min-width: 1200px) { .photo-album { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; } } /* Each photo tile */ .photo-album__item { position: relative; display: block; aspect-ratio: 3 / 2; background-size: cover; background-position: center; background-color: var(--clr-slate); border: none; padding: 0; cursor: zoom-in; overflow: hidden; transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; will-change: transform; } .photo-album__item::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.0); transition: background .3s ease; z-index: 1; } .photo-album__item::after { content: ''; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%) scale(.6); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") center/22px no-repeat; backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1); z-index: 2; } .photo-album__item:hover { transform: scale(1.02); box-shadow: 0 20px 60px rgba(0,0,0,.6); z-index: 2; } .photo-album__item:hover::before { background: rgba(0,0,0,.18); } .photo-album__item:hover::after { opacity: 1; transform: translate(-50%,-50%) scale(1); } .photo-album__count { text-align: center; color: rgba(255,255,255,.35); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; margin-top: var(--sp-8); } /* ── Lightbox overlay ───────────────────────────────────────────────────── */ .lb { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.97); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } .lb.is-open { opacity: 1; visibility: visible; } /* Image stage */ .lb__stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; } .lb__img { max-width: 90vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; display: block; user-select: none; transition: opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1); transform: scale(1); cursor: zoom-in; border-radius: 2px; box-shadow: 0 32px 80px rgba(0,0,0,.7); } .lb__img.is-loading { opacity: 0; transform: scale(.97); } .lb__img.is-zoomed { transform: scale(2.2); cursor: zoom-out; } /* Caption area */ .lb__caption { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--sp-6) var(--sp-8); background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%); color: #fff; text-align: center; pointer-events: none; transition: opacity .3s ease; } .lb__caption-title { font-family: var(--ff-display); font-size: clamp(.9rem, 2vw, 1.125rem); font-weight: 600; letter-spacing: .01em; margin: 0 0 var(--sp-1); } .lb__caption-text { font-size: .875rem; color: rgba(255,255,255,.65); margin: 0; } /* Counter */ .lb__counter { position: absolute; top: var(--sp-5); left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.08); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); border-radius: 100px; padding: var(--sp-1) var(--sp-4); font-size: .75rem; letter-spacing: .1em; color: rgba(255,255,255,.7); font-family: var(--ff-body); white-space: nowrap; pointer-events: none; } /* Close button */ .lb__close { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 44px; height: 44px; border: none; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); border-radius: 50%; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; z-index: 10; } .lb__close:hover { background: rgba(255,255,255,.2); transform: scale(1.1); } /* Prev / Next arrows */ .lb__prev, .lb__next { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: none; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); border-radius: 50%; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s, opacity .2s; opacity: .6; z-index: 10; } .lb__prev { left: var(--sp-4); } .lb__next { right: var(--sp-4); } .lb__prev:hover, .lb__next:hover { background: rgba(255,255,255,.18); opacity: 1; transform: translateY(-50%) scale(1.08); } .lb__prev:disabled, .lb__next:disabled { opacity: .15; cursor: default; } /* Filmstrip thumbnails */ .lb__strip { position: absolute; bottom: var(--sp-4); left: 50%; transform: translateX(-50%); display: flex; gap: 5px; max-width: 90vw; overflow-x: auto; padding: var(--sp-2) var(--sp-3); scrollbar-width: none; -ms-overflow-style: none; } .lb__strip::-webkit-scrollbar { display: none; } .lb__thumb { flex-shrink: 0; width: 52px; height: 36px; border-radius: 3px; background-size: cover; background-position: center; border: 2px solid transparent; opacity: .45; cursor: pointer; transition: opacity .2s, border-color .2s; } .lb__thumb.is-active { border-color: var(--clr-teal); opacity: 1; } .lb__thumb:hover:not(.is-active) { opacity: .75; } /* Loading spinner */ .lb__spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .2s; } .lb__spinner.is-visible { opacity: 1; } .lb__spinner-ring { width: 36px; height: 36px; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--clr-teal); border-radius: 50%; animation: lbSpin .7s linear infinite; } @keyframes lbSpin { to { transform: rotate(360deg); } } /* Swipe hint on first open */ .lb__swipe-hint { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.4); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; animation: lbHintFade 2.5s ease forwards; pointer-events: none; } @keyframes lbHintFade { 0%{opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{opacity:0} } /* Mobile */ @media (max-width: 599px) { .photo-album { grid-template-columns: repeat(2, 1fr); gap: 4px; } .photo-album__item { aspect-ratio: 1; } .lb__img { max-width: 100vw; max-height: 75vh; } .lb__prev { left: var(--sp-2); } .lb__next { right: var(--sp-2); } .lb__strip { display: none; } .lb__caption { padding: var(--sp-4) var(--sp-5); } }