/* =========================================================== Anura Connect - Marketing site styles (redesign) Builds on colors_and_type.css (tokens + fonts). White-dominant, navy-anchored, blue-accented. Clean & clinical. TWO DESIGN DIRECTIONS, switchable at runtime via . Refined = light, airy, restrained. Bold = navy-forward, larger type, stronger texture. =========================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--link); text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy); margin: 0; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } ::selection { background: var(--sky-200); color: var(--navy); } /* Accent is themeable via --accent (defaults to brand blue). */ :root { --accent: var(--blue); --accent-strong: var(--blue-600); --accent-tint: var(--sky-100); } /* =========================================================== DIRECTION TOKENS These drive the difference between Refined and Bold. =========================================================== */ :root { --d-hero-scale: 1; /* hero display size multiplier */ --d-h2-scale: 1; /* section heading size multiplier */ --d-tex-light: 0.22; /* diamond-grid texture on light */ --d-tex-dark: 0.10; /* cross-scatter texture on dark */ --d-card-radius: var(--r-lg); --d-card-shadow: var(--shadow-sm); --d-eyebrow-size: var(--fs-caption); --d-eyebrow-rule: 28px; --d-section-pad: 104px; } :root[data-direction="bold"] { --d-hero-scale: 1.16; --d-h2-scale: 1.12; --d-tex-light: 0.55; --d-tex-dark: 0.20; --d-card-radius: var(--r-xl); --d-card-shadow: var(--shadow-md); --d-eyebrow-size: 0.9rem; --d-eyebrow-rule: 44px; --d-section-pad: 120px; } /* ---- Layout helpers ---- */ .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; } .wrap-narrow { max-width: 820px; } .section { padding: var(--d-section-pad) 0; } .section-sm { padding: 64px 0; } .tint { background: var(--gray-50); } .panel-sky { background: var(--sky-100); } .navy-section { background: var(--navy); color: var(--fg-on-dark); } .navy-section h1, .navy-section h2, .navy-section h3, .navy-section h4 { color: #fff; } /* =========================================================== TEXTURE UTILITIES (brand graphics as quiet field texture) Apply to a
; keep inner .wrap above the texture. =========================================================== */ .tex { position: relative; isolation: isolate; } .tex > .wrap, .tex > * { position: relative; z-index: 1; } .tex::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; } .tex-grid::before { background: url("assets/graphics/diamond-grid-tile.svg") center / 250px 250px repeat; opacity: var(--d-tex-light); -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); } .tex-scatter::before { background: url("assets/graphics/cross-scatter-tile.svg") 0 0 / 260px 260px repeat; opacity: var(--d-tex-dark); } /* watermark mark, bottom/edge of dark fields */ .mark-wm { position: relative; overflow: hidden; } .mark-wm::after { content: ""; position: absolute; right: -160px; top: 50%; transform: translateY(-50%); width: 520px; height: 520px; background: url("assets/anura_mark.png") center/contain no-repeat; opacity: .05; pointer-events: none; z-index: 0; } .mark-wm > .wrap { position: relative; z-index: 1; } /* centered diamond divider between sections */ .brand-divider { padding: 8px 0; } .brand-divider img { width: 100%; max-width: 1180px; margin: 0 auto; height: auto; display: block; opacity: .9; } :root[data-direction="bold"] .brand-divider { display: none; } /* bold uses color blocking instead */ /* eyebrow with a small leading rule for stronger hierarchy */ .eyebrow { font-family: var(--font-display); font-weight: var(--w-subhead); font-size: var(--d-eyebrow-size); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 12px; } .eyebrow::before { content: ""; width: var(--d-eyebrow-rule); height: 2px; background: var(--accent); border-radius: 2px; opacity: .85; transition: width .25s ease; } .eyebrow.center { justify-content: center; } .navy-section .eyebrow, .eyebrow.on-dark { color: var(--sky); } .navy-section .eyebrow::before, .eyebrow.on-dark::before { background: var(--sky); } .lead { font-size: var(--fs-body-lg); color: var(--fg-2); line-height: 1.6; } .navy-section .lead { color: var(--fg-on-dark-2); } .section-head { max-width: 660px; } .section-head.center { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; } .section-head h2 { font-size: calc(clamp(2rem, 3.4vw, 2.7rem) * var(--d-h2-scale)); font-weight: var(--w-heading); } .section-head p { margin-top: 16px; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; border-radius: var(--r-md); padding: 14px 26px; cursor: pointer; border: 1.5px solid transparent; transition: background .17s ease, transform .17s ease, box-shadow .17s ease, color .17s ease, border-color .17s ease; line-height: 1; text-align: center; white-space: nowrap; } .btn svg { width: 18px; height: 18px; transition: transform .2s ease; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-primary:active { transform: translateY(0); background: var(--accent-strong); } .btn-primary:hover svg { transform: translateX(3px); } .btn-navy { background: var(--navy); color: #fff; } .btn-navy:hover { background: var(--navy-700); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-ghost { background: transparent; color: var(--accent); border-color: var(--border-strong); } .btn-ghost:hover { border-color: var(--accent); background: var(--accent-tint); } .btn-on-navy { background: var(--sky); color: var(--navy); } .btn-on-navy:hover { background: var(--sky-300); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); } .btn-outline-light:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.7); transform: translateY(-2px); } .btn-lg { padding: 17px 32px; font-size: 1.1875rem; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); } .link-arrow svg { width: 18px; height: 18px; transition: transform .2s ease; } .link-arrow:hover svg { transform: translateX(4px); } /* ---- Header ---- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; } .site-header.scrolled { border-bottom-color: var(--border); box-shadow: 0 2px 14px rgba(10,34,57,.05); } .site-header .bar { display: flex; align-items: center; justify-content: space-between; height: 112px; transition: height .25s ease; } .site-header.scrolled .bar { height: 88px; } .site-header .logo img { height: 86px; width: auto; transition: height .25s ease; } .site-header.scrolled .logo img { height: 66px; } .nav { display: flex; align-items: center; gap: 4px; } .nav a.navlink { position: relative; font-weight: 600; font-size: 1rem; color: var(--gray-700); padding: 10px 16px; border-radius: var(--r-sm); transition: color .15s; } .nav a.navlink::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } .nav a.navlink:hover { color: var(--navy); } .nav a.navlink:hover::after { transform: scaleX(1); } .nav a.navlink.active { color: var(--accent); } .nav a.navlink.active::after { transform: scaleX(1); } .header-cta { display: flex; align-items: center; gap: 10px; } .header-cta .btn { padding: 11px 22px; font-size: 0.98rem; } .cta-mobile { display: none; } .menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: var(--navy); } .menu-toggle svg { width: 26px; height: 26px; } /* ---- Footer ---- */ .site-footer { background: var(--navy); color: var(--fg-on-dark-2); padding: 80px 0 32px; position: relative; overflow: hidden; } .site-footer::before { content: ""; position: absolute; left: -120px; bottom: -160px; width: 420px; height: 420px; background: url("assets/anura_mark.png") center/contain no-repeat; opacity: .04; pointer-events: none; } .site-footer .wrap { position: relative; z-index: 1; } .site-footer .cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 48px; } .site-footer .brandcol img { height: 40px; margin-bottom: 20px; } .site-footer .brandcol p { font-size: 0.96rem; line-height: 1.65; color: var(--fg-on-dark-2); max-width: 32ch; margin: 0 0 22px; } .site-footer h4 { color: #fff; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin: 0 0 18px; font-family: var(--font-display); } .site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .site-footer ul a { color: var(--fg-on-dark-2); font-size: 0.96rem; transition: color .15s, padding-left .15s; } .site-footer ul a:hover { color: var(--sky); padding-left: 4px; } .site-footer .contact-line { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; margin-bottom: 13px; color: var(--fg-on-dark); } .site-footer .contact-line svg { width: 17px; height: 17px; color: var(--sky); flex: none; } .site-footer .contact-line a:hover { color: var(--sky); } .site-footer .sms { background: rgba(83,162,190,0.12); border: 1px solid rgba(83,162,190,0.28); border-radius: var(--r-md); padding: 14px 16px; font-size: 0.9rem; color: var(--fg-on-dark); margin-top: 8px; } .site-footer .sms b { color: #fff; font-weight: 600; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 56px; padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 0.86rem; flex-wrap: wrap; } /* ---- Cards ---- */ .card { background: #fff; border: 1px solid var(--border); border-radius: var(--d-card-radius); box-shadow: var(--d-card-shadow); padding: 30px; transition: box-shadow .2s, transform .2s, border-color .2s; } .card.hoverable:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--sky-200); } /* Icon tile used across cards */ .icon-tile { width: 52px; height: 52px; border-radius: 14px; background: var(--accent-tint); display: flex; align-items: center; justify-content: center; flex: none; transition: background .2s, transform .2s; } .icon-tile svg { width: 26px; height: 26px; color: var(--accent); stroke-width: 2; } .card.hoverable:hover .icon-tile { background: var(--accent); } .card.hoverable:hover .icon-tile svg { color: #fff; } /* ---- Credibility strip (shared) ---- */ .cred { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--d-card-radius); overflow: hidden; } .cred .item { background: #fff; padding: 28px 26px; display: flex; gap: 14px; align-items: flex-start; transition: background .2s; } .cred .item:hover { background: var(--sky-100); } .cred .item svg { width: 24px; height: 24px; color: var(--accent); flex: none; margin-top: 2px; stroke-width: 2; } .cred .item .t { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 1.02rem; line-height: 1.25; } .cred .item .d { color: var(--fg-2); font-size: 0.92rem; line-height: 1.5; margin-top: 5px; } /* ---- Connection-network panel (intro "we connect" graphic) ---- */ .net-panel { width: 100%; background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); padding: 30px; box-shadow: var(--shadow-md); } .net-panel img { width: 100%; display: block; border-radius: var(--r-md); } .net-panel .net-cap { margin: 22px 6px 4px; font-family: var(--font-display); font-weight: 600; color: var(--navy); font-size: 1rem; line-height: 1.45; } .net-panel .net-cap span { color: var(--accent); } /* =========================================================== HERO theming (gradient default; solid optional via data-hero) =========================================================== */ html[data-hero="solid"] .home-hero, html[data-hero="solid"] .page-hero { background: var(--navy); } /* ---- Page heroes (interior pages) ---- */ .page-hero { background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy) 48%, var(--navy-700) 100%); color: #fff; position: relative; overflow: hidden; } .page-hero::before { content:""; position:absolute; inset:0; background:url("assets/graphics/cross-scatter-tile.svg") 0 0 / 260px 260px repeat; opacity: var(--d-tex-dark); pointer-events:none; z-index:0; } .page-hero::after { content:""; position:absolute; right:-160px; top:50%; transform:translateY(-50%); width:520px; height:520px; background:url("assets/anura_mark.png") center/contain no-repeat; opacity:.05; pointer-events:none; z-index:0; } .page-hero .wrap { padding: 100px 32px; position: relative; z-index: 2; } .page-hero h1 { color:#fff; font-size: calc(clamp(2.3rem, 4.6vw, 3.7rem) * var(--d-hero-scale)); font-weight: var(--w-display); line-height: 1.06; max-width: 18ch; letter-spacing:-.025em; } .page-hero .kicker { color: var(--sky-200); font-size: 1.2rem; max-width: 60ch; margin-top: 22px; line-height: 1.55; } .split-hero .wrap { display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center; } .split-hero .hphoto { position: relative; } .split-hero .hphoto img { width:100%; border-radius: var(--r-xl); box-shadow: 0 28px 64px rgba(0,0,0,.4); aspect-ratio: 4/3; object-fit: cover; } /* =========================================================== BOLD-ONLY section flips: tag a section .flip-navy to make it a navy field in Bold (stays light in Refined). Text + cards adapt. =========================================================== */ [data-direction="bold"] .flip-navy { background: var(--navy); color: var(--fg-on-dark); } [data-direction="bold"] .flip-navy.tint { background: var(--navy); } [data-direction="bold"] .flip-navy h1, [data-direction="bold"] .flip-navy h2, [data-direction="bold"] .flip-navy h3, [data-direction="bold"] .flip-navy h4 { color: #fff; } [data-direction="bold"] .flip-navy .eyebrow { color: var(--sky); } [data-direction="bold"] .flip-navy .eyebrow::before { background: var(--sky); } [data-direction="bold"] .flip-navy .lead { color: var(--fg-on-dark-2); } [data-direction="bold"] .flip-navy p { color: var(--fg-on-dark-2); } [data-direction="bold"] .flip-navy p[style] { color: var(--fg-on-dark-2) !important; } /* cards on navy become translucent sky panels */ [data-direction="bold"] .flip-navy .feat, [data-direction="bold"] .flip-navy .perk, [data-direction="bold"] .flip-navy .value-card, [data-direction="bold"] .flip-navy .info-card, [data-direction="bold"] .flip-navy .card, [data-direction="bold"] .flip-navy .role, [data-direction="bold"] .flip-navy .svc { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.14); box-shadow: none; } [data-direction="bold"] .flip-navy .feat:hover, [data-direction="bold"] .flip-navy .perk:hover, [data-direction="bold"] .flip-navy .value-card:hover, [data-direction="bold"] .flip-navy .card:hover, [data-direction="bold"] .flip-navy .svc:hover { background: rgba(255,255,255,0.08); border-color: var(--sky); } [data-direction="bold"] .flip-navy .feat h3, [data-direction="bold"] .flip-navy .perk h3, [data-direction="bold"] .flip-navy .value-card h3, [data-direction="bold"] .flip-navy .info-card h2, [data-direction="bold"] .flip-navy .feat p, [data-direction="bold"] .flip-navy .perk p, [data-direction="bold"] .flip-navy .value-card p { color: #fff; } [data-direction="bold"] .flip-navy .feat p, [data-direction="bold"] .flip-navy .perk p, [data-direction="bold"] .flip-navy .value-card p, [data-direction="bold"] .flip-navy .role span, [data-direction="bold"] .flip-navy .svc span, [data-direction="bold"] .flip-navy .steps li { color: var(--fg-on-dark-2); } [data-direction="bold"] .flip-navy .icn { background: rgba(83,162,190,0.16); } [data-direction="bold"] .flip-navy .icn svg { color: var(--sky); } [data-direction="bold"] .flip-navy .net-panel { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); } [data-direction="bold"] .flip-navy .net-panel img { background:#fff; } /* sky-tinted inner panels on a navy field need a real surface */ [data-direction="bold"] .flip-navy .panel-sky, [data-direction="bold"] .flip-navy .info-card[style*="sky"] { background: rgba(83,162,190,0.12) !important; } /* In bold, give the home hero a deeper field + larger presence handled in page CSS via tokens */ /* ---- Forms (shared) ---- */ .form-card { background:#fff; border:1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: 40px; } .field-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .field { margin-bottom:18px; } .field label { display:block; font-weight:600; font-size:.94rem; color:var(--gray-700); margin-bottom:7px; } .field input, .field select, .field textarea { width:100%; box-sizing:border-box; font-family:var(--font-body); font-size:1rem; color:var(--ink); padding:13px 15px; border:1px solid var(--border-strong); border-radius:var(--r-md); background:#fff; transition: border-color .15s, box-shadow .15s; } .field textarea { min-height:140px; resize:vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(83,162,190,.22); } .form-msg { display:none; background: var(--success-bg); color: var(--success); border-radius: var(--r-md); padding:14px 16px; font-weight:600; margin-bottom: 18px; } /* =========================================================== Design-direction switcher (review affordance, bottom-right) =========================================================== */ .dir-switch { position: fixed; right: 22px; bottom: 22px; z-index: 1000; display: flex; align-items: center; gap: 4px; background: rgba(10,34,57,.92); color: #fff; backdrop-filter: blur(8px); border-radius: var(--r-pill); padding: 6px 6px 6px 16px; box-shadow: var(--shadow-lg); font-family: var(--font-display); font-size: .82rem; } .dir-switch .lbl { letter-spacing: .1em; text-transform: uppercase; font-weight: 600; font-size: .68rem; color: var(--sky-200); margin-right: 8px; } .dir-switch button { border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: .9rem; padding: 8px 16px; border-radius: var(--r-pill); background: transparent; color: var(--sky-200); transition: background .15s, color .15s; } .dir-switch button.on { background: var(--sky); color: var(--navy); } .dir-switch button:hover:not(.on) { color: #fff; } @media (max-width: 600px) { .dir-switch { right: 12px; bottom: 12px; padding: 5px 5px 5px 12px; } .dir-switch .lbl { display: none; } } @media print { .dir-switch { display: none; } } /* =========================================================== Reveal-on-scroll. Visible by default; JS + motion opt-in. =========================================================== */ .reveal { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .js-anim .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); will-change: opacity, transform; } .js-anim .reveal.in { opacity: 1; transform: none; } .js-anim .reveal.d1 { transition-delay: .08s; } .js-anim .reveal.d2 { transition-delay: .16s; } .js-anim .reveal.d3 { transition-delay: .24s; } .js-anim .reveal.d4 { transition-delay: .32s; } .js-anim [data-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); } .js-anim [data-stagger].in > * { opacity: 1; transform: none; } .js-anim [data-stagger].in > *:nth-child(1){ transition-delay:.04s; } .js-anim [data-stagger].in > *:nth-child(2){ transition-delay:.10s; } .js-anim [data-stagger].in > *:nth-child(3){ transition-delay:.16s; } .js-anim [data-stagger].in > *:nth-child(4){ transition-delay:.22s; } .js-anim [data-stagger].in > *:nth-child(5){ transition-delay:.28s; } .js-anim [data-stagger].in > *:nth-child(6){ transition-delay:.34s; } .js-anim [data-stagger].in > *:nth-child(7){ transition-delay:.40s; } .js-anim [data-stagger].in > *:nth-child(8){ transition-delay:.46s; } } /* ---- Responsive ---- */ @media (max-width: 980px) { .cred { grid-template-columns: 1fr 1fr; } } @media (max-width: 920px) { :root { --d-section-pad: 72px; } .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 36px; } .site-footer .brandcol { grid-column: 1 / -1; } .nav, .header-cta { display: none; } .menu-toggle { display: inline-flex; } .split-hero .wrap, .page-hero.split-hero .wrap { grid-template-columns: 1fr; gap: 38px; } .split-hero .hphoto { max-width: 480px; } .mobile-open .nav .cta-mobile { display: inline-flex; justify-content: center; margin-top: 14px; } .mobile-open .nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: #fff; border-bottom: 1px solid var(--border); padding: 16px 22px 24px; box-shadow: var(--shadow-lg); } .mobile-open .nav a.navlink { padding: 13px 12px; font-size: 1.05rem; } .mobile-open .nav a.navlink::after { display: none; } } @media (max-width: 600px) { .wrap { padding: 0 20px; } :root { --d-section-pad: 56px; } .cred { grid-template-columns: 1fr; } .site-footer .cols { grid-template-columns: 1fr; } .form-card { padding: 26px; } .field-row { grid-template-columns: 1fr; } } .form-err { display:none; background:#FDECEC; color:#B42318; border:1px solid #F5C6C2; border-radius:var(--r-md); padding:14px 16px; font-weight:600; margin-bottom:18px; }