/* * SyntropyData — "The Second Storefront" landing page. * Focus, animation, responsive rules, and interaction-state helpers. * Per-section layout styling is kept inline in index.html to stay faithful to * the approved Claude Design source (docs/designs/The Second Storefront.dc.html). * * The design tokens (:root custom properties) and the base reset/body/link * styles are inlined in index.html's so the theme survives even if this * stylesheet fails to load — that inline block is their single source of truth. * Do not redesign here. */ /* --- Form focus (extends the base reset inlined in index.html) --- */ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } @keyframes floatIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* --- Hero human/machine tab toggle --- */ .hero-tab { flex: 1; border: none; cursor: pointer; padding: 13px 10px; background: transparent; color: var(--mute); transition: all .2s ease; } .hero-tab[aria-selected="true"] { background: var(--ink); color: #F5F2EA; } /* --- Accordion (What we test, FAQ) --- */ .acc-trigger { width: 100%; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; text-align: left; } /* --- Responsive (mobile) --- */ @media (max-width: 760px) { [data-r="two"], [data-r="three"], [data-r="formgrid"] { grid-template-columns: 1fr !important; } [data-r="two"] { gap: 40px !important; } [data-r="covrow"] { grid-template-columns: 1fr !important; gap: 7px !important; } [data-r="sticky"] { position: static !important; top: auto !important; } [data-r="navtext"] { display: none !important; } section { padding-left: 20px !important; padding-right: 20px !important; } header nav { padding-left: 20px !important; padding-right: 20px !important; } footer { padding-left: 20px !important; padding-right: 20px !important; } } /* --- Reduced motion --- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }