/* ========================================================================= Our Seventh Sense (O7S.ai) — Design System Four pastel themes on white. Switchable via [data-theme] on . Themes: sage | sky | sand | lavender ========================================================================= */ /* ---------- Base tokens (shared) ---------- */ :root { --max: 1140px; --radius: 18px; --radius-sm: 12px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06); --shadow-md: 0 8px 24px rgba(16, 24, 40, .06), 0 2px 6px rgba(16, 24, 40, .04); --shadow-lg: 0 24px 60px rgba(16, 24, 40, .10); --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; --font-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --ease: cubic-bezier(.2, .7, .2, 1); --step: clamp(1rem, 0.9rem + 0.4vw, 1.125rem); /* neutral text on white — shared across themes */ --bg: #ffffff; --ink: #1d2430; --ink-soft: #4a5568; --ink-faint: #7a8699; --white: #ffffff; } /* ---------- SAGE — sustainability green ---------- */ :root, [data-theme="sage"] { --primary: #4f7a63; --primary-600: #3f6650; --primary-050: #eef4f0; --accent: #c6a15b; /* soft ochre */ --tint-1: #f4f8f5; --tint-2: #eaf2ec; --tint-3: #dfeae2; --border: #e2ebe4; --ring: rgba(79, 122, 99, .28); --hero-a: #f2f8f3; --hero-b: #e7f1ea; --grad-a: #6ea587; --grad-b: #b9cf9c; } /* ---------- SKY — calm tech teal/blue ---------- */ [data-theme="sky"] { --primary: #3f7fa6; --primary-600: #336a8c; --primary-050: #eaf3f8; --accent: #7bb0b8; --tint-1: #f2f8fb; --tint-2: #e7f1f7; --tint-3: #dbeaf2; --border: #dce9f1; --ring: rgba(63, 127, 166, .28); --hero-a: #f1f8fb; --hero-b: #e4f0f6; --grad-a: #6aa7c9; --grad-b: #a9d3d0; } /* ---------- SAND — warm human-first ---------- */ [data-theme="sand"] { --primary: #b06a4a; --primary-600: #955636; --primary-050: #f8efe9; --accent: #d9a86c; --tint-1: #fbf6f1; --tint-2: #f6ece3; --tint-3: #efe0d4; --border: #efe1d6; --ring: rgba(176, 106, 74, .26); --hero-a: #fbf5ef; --hero-b: #f4e7db; --grad-a: #d79a72; --grad-b: #e9c9a3; } /* ---------- LAVENDER — visionary slate/violet ---------- */ [data-theme="lavender"] { --primary: #6a5ea0; --primary-600: #574c87; --primary-050: #f0eef8; --accent: #9d8fc7; --tint-1: #f6f4fb; --tint-2: #eeeaf7; --tint-3: #e4def1; --border: #e6e1f1; --ring: rgba(106, 94, 160, .26); --hero-a: #f5f3fb; --hero-b: #ece7f6; --grad-a: #8b7dc0; --grad-b: #c3b8e2; } /* ---------- Reset / base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--step); line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; display: block; } a { color: var(--primary-600); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--ink); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: clamp(2.3rem, 1.6rem + 3vw, 3.6rem); margin: 0 0 .5em; } h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); margin: 0 0 .5em; } h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); margin: 0 0 .4em; } p { margin: 0 0 1rem; } .container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 22px; } .eyebrow { display: inline-block; font-family: var(--font-sans); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .74rem; color: var(--primary-600); background: var(--primary-050); padding: .35em .8em; border-radius: var(--radius-pill); margin-bottom: 1rem; } .lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); color: var(--ink-soft); } .muted { color: var(--ink-soft); } .center { text-align: center; } .mx-auto { margin-inline: auto; } .measure { max-width: 62ch; } section { padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: .5em; cursor: pointer; font-family: var(--font-sans); font-weight: 600; font-size: .98rem; padding: .82em 1.4em; border-radius: var(--radius-pill); border: 1px solid transparent; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; text-decoration: none; line-height: 1; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--primary-600); box-shadow: var(--shadow-md); color: #fff; } .btn-ghost { background: #fff; color: var(--primary-600); border-color: var(--border); } .btn-ghost:hover { border-color: var(--primary); background: var(--tint-1); } .btn-lg { padding: 1em 1.7em; font-size: 1.02rem; } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 74px; } .brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; color: var(--ink); } .brand:hover { text-decoration: none; } .brand .logo { width: 38px; height: 38px; } .brand small { display: block; font-family: var(--font-sans); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; } .nav-links { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; } .nav-links a { color: var(--ink-soft); font-size: .95rem; font-weight: 500; padding: .5em .8em; border-radius: var(--radius-pill); transition: background .2s, color .2s; } .nav-links a:hover, .nav-links a.active { color: var(--primary-600); background: var(--tint-1); text-decoration: none; } .nav-actions { display: flex; align-items: center; gap: .6rem; } /* theme switcher */ .theme-switch { display: flex; align-items: center; gap: .4rem; } .theme-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; transition: transform .18s var(--ease); } .theme-dot:hover { transform: scale(1.15); } .theme-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--primary); transform: scale(1.12); } .dot-sage { background: linear-gradient(135deg, #6ea587, #b9cf9c); } .dot-sky { background: linear-gradient(135deg, #6aa7c9, #a9d3d0); } .dot-sand { background: linear-gradient(135deg, #d79a72, #e9c9a3); } .dot-lavender { background: linear-gradient(135deg, #8b7dc0, #c3b8e2); } .menu-btn { display: none; background: none; border: 1px solid var(--border); border-radius: 10px; width: 42px; height: 40px; cursor: pointer; } .menu-btn span, .menu-btn span::before, .menu-btn span::after { content: ""; display: block; width: 18px; height: 2px; background: var(--ink); margin: 0 auto; position: relative; } .menu-btn span::before { position: absolute; top: -6px; } .menu-btn span::after { position: absolute; top: 6px; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--hero-a), var(--hero-b)); } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(closest-side at 82% 12%, var(--tint-3), transparent 70%), radial-gradient(closest-side at 12% 88%, var(--tint-2), transparent 70%); } .hero .container { position: relative; z-index: 2; padding-top: clamp(3rem, 2rem + 4vw, 5.5rem); padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); } .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; } .hero h1 .grad { background: linear-gradient(120deg, var(--grad-a), var(--grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; } .hero-art { display: grid; place-items: center; } /* seventh-sense radial mark */ .pulse { width: min(360px, 90%); aspect-ratio: 1; position: relative; } .pulse .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--primary); opacity: .18; } .pulse .ring:nth-child(2) { inset: 12%; opacity: .28; } .pulse .ring:nth-child(3) { inset: 26%; opacity: .4; } .pulse .ring:nth-child(4) { inset: 40%; opacity: .55; } .pulse .core { position: absolute; inset: 52%; transform: translate(-50%, -50%); left: 50%; top: 50%; width: 34%; height: 34%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--grad-b), var(--grad-a)); box-shadow: var(--shadow-md); } /* ---------- Generic layout helpers ---------- */ .grid { display: grid; gap: 1.4rem; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } /* ---------- Cards ---------- */ .card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary); } .card .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-050); color: var(--primary-600); margin-bottom: 1rem; } .card .ic svg { width: 24px; height: 24px; } .card h3 { margin-bottom: .35em; } .card p { color: var(--ink-soft); margin: 0; font-size: .98rem; } .tint-band { background: linear-gradient(180deg, var(--tint-1), #fff); } .tint-band-2 { background: var(--tint-1); } /* principle rows */ .principle { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; padding: 1.4rem 0; border-top: 1px solid var(--border); } .principle:first-child { border-top: none; } .principle .num { font-family: var(--font-serif); font-size: 1.6rem; color: var(--primary); width: 54px; height: 54px; border-radius: 50%; background: var(--tint-2); display: grid; place-items: center; } .principle h3 { margin-bottom: .2em; } .principle p { color: var(--ink-soft); margin: 0; } /* stat tiles */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .stat { text-align: center; padding: 1.6rem 1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); } .stat .n { font-family: var(--font-serif); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); color: var(--primary); line-height: 1; } .stat .l { color: var(--ink-soft); font-size: .92rem; margin-top: .5rem; } /* quote */ .quote { background: linear-gradient(160deg, var(--hero-a), var(--hero-b)); border-radius: var(--radius); padding: clamp(2rem, 1.4rem + 3vw, 3.4rem); position: relative; } .quote blockquote { font-family: var(--font-serif); font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); line-height: 1.4; color: var(--ink); margin: 0; } .quote cite { display: block; margin-top: 1.2rem; font-style: normal; color: var(--ink-soft); font-size: .98rem; } /* ---------- Products ---------- */ .product { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); } .product .top { padding: 1.6rem 1.6rem 1.2rem; background: linear-gradient(160deg, var(--tint-1), #fff); border-bottom: 1px solid var(--border); } .product .tag { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--primary-600); } .product .body { padding: 1.4rem 1.6rem 1.7rem; } .product ul { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); } .product ul li { margin-bottom: .35rem; } .badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 30%, #fff); padding: .25em .6em; border-radius: var(--radius-pill); } /* ---------- Leadership ---------- */ .person { text-align: center; } .person .avatar { width: 128px; height: 128px; border-radius: 50%; margin: 0 auto 1rem; display: grid; place-items: center; font-family: var(--font-serif); font-size: 2.4rem; color: #fff; font-weight: 600; background: linear-gradient(140deg, var(--grad-a), var(--grad-b)); box-shadow: var(--shadow-md); } .person h3 { margin-bottom: .1em; } .person .role { color: var(--primary-600); font-weight: 600; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; } .person p { color: var(--ink-soft); font-size: .96rem; margin-top: .8rem; text-align: left; } /* ---------- Values / mission callout ---------- */ .callout { background: linear-gradient(140deg, var(--primary), var(--primary-600)); color: #fff; border-radius: calc(var(--radius) + 6px); padding: clamp(2.2rem, 1.6rem + 3vw, 4rem); text-align: center; box-shadow: var(--shadow-lg); } .callout h2 { color: #fff; } .callout p { color: rgba(255, 255, 255, .9); } .callout .btn-ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; } .callout .btn-ghost:hover { background: rgba(255,255,255,.2); } .callout .btn-primary { background: #fff; color: var(--primary-600); } .callout .btn-primary:hover { background: #fff; color: var(--primary); } /* ---------- Forms ---------- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; } .field { display: flex; flex-direction: column; gap: .4rem; } .field.full { grid-column: 1 / -1; } .field label { font-size: .85rem; font-weight: 600; color: var(--ink-soft); } .field input, .field textarea, .field select { font-family: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75em .9em; transition: border-color .2s, box-shadow .2s; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); } .field textarea { min-height: 130px; resize: vertical; } /* contact info list */ .info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; } .info-list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; } .info-list .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--tint-2); color: var(--primary-600); display: grid; place-items: center; } .info-list .ic svg { width: 22px; height: 22px; } .info-list strong { display: block; } .info-list span { color: var(--ink-soft); font-size: .96rem; } /* ---------- Footer ---------- */ .site-footer { background: var(--tint-1); border-top: 1px solid var(--border); padding: 3.5rem 0 2rem; margin-top: 2rem; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; } .footer-grid h4 { font-family: var(--font-sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 1rem; } .footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .footer-grid a { color: var(--ink-soft); font-size: .95rem; } .footer-grid a:hover { color: var(--primary-600); } .footer-brand p { color: var(--ink-soft); font-size: .95rem; max-width: 34ch; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--ink-faint); font-size: .88rem; } /* ---------- Page hero (interior) ---------- */ .page-hero { background: linear-gradient(160deg, var(--hero-a), var(--hero-b)); border-bottom: 1px solid var(--border); } .page-hero .container { padding-top: clamp(2.4rem, 1.8rem + 3vw, 4rem); padding-bottom: clamp(2.4rem, 1.8rem + 3vw, 4rem); } .page-hero h1 { margin-bottom: .3em; } .page-hero .lead { max-width: 60ch; } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-art { order: -1; } .pulse { width: min(260px, 70%); } .split { grid-template-columns: 1fr; gap: 2rem; } .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .stats { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .nav-links { position: fixed; inset: 74px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--border); padding: .5rem 1rem 1rem; box-shadow: var(--shadow-md); transform: translateY(-140%); transition: transform .3s var(--ease); } .nav-links.open { transform: none; } .nav-links a { padding: .8em 1em; } .menu-btn { display: inline-flex; align-items: center; justify-content: center; } } @media (max-width: 560px) { .grid-2, .grid-3, .grid-4, .form-grid, .footer-grid { grid-template-columns: 1fr; } .nav-actions .brand small { display: none; } } /* ---------- Hero pulse animation ---------- */ .pulse .ring { animation: breathe 6s var(--ease) infinite; } .pulse .ring:nth-child(1) { animation-delay: 0s; } .pulse .ring:nth-child(2) { animation-delay: .5s; } .pulse .ring:nth-child(3) { animation-delay: 1s; } .pulse .ring:nth-child(4) { animation-delay: 1.5s; } .pulse .core { animation: float 7s var(--ease) infinite; } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: var(--o, .4); } 50% { transform: scale(1.04); opacity: calc(var(--o, .4) + .18); } } @keyframes float { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -52%) scale(1.05); } } /* ---------- Feedback-loop diagram ---------- */ .loop-wrap { max-width: 560px; margin-inline: auto; } .loop { width: 100%; height: auto; display: block; overflow: visible; } .loop .guide { fill: none; stroke: var(--border); stroke-width: 2; } .loop .flow { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 16; animation: loopflow 2.4s linear infinite; opacity: .9; } @keyframes loopflow { to { stroke-dashoffset: -104; } } .loop .node-c { fill: #fff; stroke: var(--primary); stroke-width: 2.5; } .loop .node-c.accent { stroke: var(--accent); } .loop .node-ring { fill: var(--tint-2); } .loop .node-num { fill: var(--primary-600); font-family: var(--font-serif); font-weight: 600; font-size: 26px; text-anchor: middle; } .loop .node-ic { stroke: var(--primary-600); stroke-width: 2; fill: none; } .loop .node-title { fill: var(--ink); font-family: var(--font-serif); font-weight: 600; font-size: 18px; text-anchor: middle; } .loop .node-sub { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 12.5px; text-anchor: middle; letter-spacing: .02em; } .loop .chev { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .7; } .loop .hub { fill: var(--primary-050); } .loop .hub-t { fill: var(--primary-600); font-family: var(--font-sans); font-weight: 700; font-size: 12px; text-anchor: middle; letter-spacing: .14em; text-transform: uppercase; } .loop .hub-s { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 12px; text-anchor: middle; } /* ---------- 404 ---------- */ .error-hero { min-height: 62vh; display: grid; place-items: center; text-align: center; background: linear-gradient(160deg, var(--hero-a), var(--hero-b)); } .error-hero .code { font-family: var(--font-serif); font-size: clamp(4rem, 3rem + 8vw, 8rem); line-height: 1; color: var(--primary); } @media (max-width: 560px) { .loop .node-title { font-size: 16px; } .loop .node-sub { font-size: 11px; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; transition: none; } .pulse .ring, .pulse .core, .loop .flow { animation: none !important; } }