/* ==========================================================================
AudioFusion type system
--------------------------------------------------------------------------
The storefront inherited Titan's Poppins — a rounded geometric face chosen
for a watch brand, and read as fashion rather than as audio engineering.
This replaces it with a two-family technical system:
Space Grotesk headings, navigation, buttons, prices, UI labels
Inter body copy, forms, descriptions, dense admin tables
Both are self-hosted variable fonts (400-700 in one file per subset), so
the whole system is four files / ~175KB against the 27 static Poppins
files it replaces. latin-ext is included because the rupee sign (U+20B9)
lives there — under Poppins every price on the site fell back to a system
font for that one glyph.
Everything downstream reads the two tokens below rather than naming a
family, including the vendored Titan CSS (global.css / head.css /
skin.css), whose `font-family: var(--af-font-body)` declarations were
rewritten to `var(--af-font-body)`. There is one place to change a face.
Fallbacks are metric-adjusted below so swapping in the real face does not
move text (no CLS); font-display:swap keeps text visible while they load.
========================================================================== */
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("fonts/space-grotesk-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("fonts/space-grotesk-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("fonts/inter-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("fonts/inter-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched stand-ins. Without these the swap from Helvetica/Arial to
the real face resizes every line of text once the woff2 lands. */
@font-face {
font-family: "Inter Fallback";
src: local("Helvetica Neue"), local("Arial");
size-adjust: 107%;
ascent-override: 90%;
descent-override: 22.5%;
line-gap-override: 0%;
}
@font-face {
font-family: "Space Grotesk Fallback";
src: local("Helvetica Neue"), local("Arial");
size-adjust: 100%;
ascent-override: 98%;
descent-override: 27%;
line-gap-override: 0%;
}
:root {
/* The two families, as tokens. Nothing else should name a font. */
--af-font-display: "Space Grotesk", "Space Grotesk Fallback", "Helvetica Neue",
Arial, sans-serif;
--af-font-body: "Inter", "Inter Fallback", "Helvetica Neue", Arial, sans-serif;
/* Weights are deliberate rather than "everything bold": 500 carries most
UI labels, 600 is the loudest weight in normal use, 700 is reserved for
page-level headings. */
--af-fw-regular: 400;
--af-fw-medium: 500;
--af-fw-semibold: 600;
--af-fw-bold: 700;
/* Space Grotesk sets a touch wide at small sizes; pull it in for the
chrome so navigation and buttons stay compact. */
--af-tracking-tight: -0.01em;
--af-tracking-label: 0.02em;
}
body {
font-family: var(--af-font-body);
font-weight: var(--af-fw-regular);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ==========================================================================
AudioFusion overrides on the Titan storefront chrome.
Loaded last, so it wins over global.css / head.css.
Scope is deliberately narrow: the logo lockup and the few places where
Titan's layout was sized around its short, wide wordmark SVG.
========================================================================== */
/* --------------------------------------------------------------------------
Logo
--------------------------------------------------------------------------
Titan's mark is a 85 x 15px wordmark; AudioFusion's is a near-square badge
that already carries its own lettering, so it is sized by height and given
room to breathe rather than being stretched into the old box.
-------------------------------------------------------------------------- */
.header .titan-logo img,
img.af-logo {
width: auto !important;
height: 3.25rem !important;
max-height: 3.25rem;
object-fit: contain;
display: block;
}
@media (min-width: 1024px) {
.header .titan-logo img,
img.af-logo {
height: 4.25rem !important;
max-height: 4.25rem;
}
}
.header .logo {
align-items: center;
}
.header .titan-logo {
display: flex;
align-items: center;
}
/* The bar was tuned around a 15px-tall wordmark — give the badge headroom. */
@media (min-width: 1024px) {
header .top-navbar {
padding-top: 0.5rem;
}
header .pb-header {
padding-bottom: 0.5rem;
}
}
/* Footer and mobile-header instances of the same mark. */
.footer-div img[src*="audiofusion-logo"],
.titan-mobile-header img[src*="audiofusion-logo"] {
width: auto;
height: 2.25rem;
object-fit: contain;
}
/* --------------------------------------------------------------------------
Mega menu
--------------------------------------------------------------------------
AudioFusion's tree is shallower than Titan's watch taxonomy, so the panel
no longer needs the full 32rem drop.
-------------------------------------------------------------------------- */
.header-menu-ul .dropdown-menu > ul {
height: auto;
min-height: 20rem;
max-height: 32.1875rem;
}
.header-menu-ul .dropdown-menu > ul > .category-menu-item {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.header-menu-ul .dropdown-menu .menu-thumbnail img {
-o-object-fit: contain;
object-fit: contain;
max-height: 22rem;
}
/* ==========================================================================
Login / signup modal
--------------------------------------------------------------------------
Titan's header links to #loginModal from five places but fetches the markup
over AJAX, so on this static export nothing opened. audiofusion/login-modal
.html supplies it; these are its styles, matched to the storefront.
========================================================================== */
.af-auth-modal .modal-dialog {
max-width: 26.25rem;
}
.af-auth-modal .modal-content {
position: relative;
border: 0;
border-radius: 0.75rem;
padding: 2rem 1.75rem 1.5rem;
font-family: var(--af-font-body);
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
}
.af-auth__close {
position: absolute;
top: 0.75rem;
right: 0.875rem;
width: 2rem;
height: 2rem;
padding: 0;
background: none;
border: 0;
color: #6b7280;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.af-auth__close:hover { color: #050505; }
.af-auth__head {
text-align: center;
margin-bottom: 1.25rem;
}
.af-auth__logo {
width: auto;
height: 4.5rem;
object-fit: contain;
margin-bottom: 0.75rem;
}
.af-auth__title {
font-size: 1.125rem;
line-height: 1.625rem;
font-weight: 500;
color: #050505;
margin: 0 0 0.25rem;
}
.af-auth__sub {
font-size: 0.75rem;
line-height: 1.125rem;
font-weight: 400;
color: #374151;
margin: 0;
}
/* -- tabs ----------------------------------------------------------------- */
.af-auth__tabs {
display: flex;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 1.25rem;
}
.af-auth__tab {
flex: 1 1 0;
padding: 0.625rem 0;
background: none;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #6b7280;
cursor: pointer;
}
.af-auth__tab.is-active {
color: #050505;
border-bottom-color: #050505;
}
/* -- panes ---------------------------------------------------------------- */
.af-auth__pane { display: none; }
.af-auth__pane.is-active { display: block; }
.af-auth__label {
display: block;
font-size: 0.6875rem;
font-weight: 500;
color: #374151;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 0.3125rem;
}
.af-auth__input {
width: 100%;
height: 2.75rem;
padding: 0 0.875rem;
margin-bottom: 0.875rem;
background: #f9fafb;
border: 1px solid rgba(0, 0, 0, 0.101961);
border-radius: 0.5rem;
font-family: inherit;
font-size: 0.8125rem;
color: #050505;
}
.af-auth__input::placeholder { color: #9ca3af; }
.af-auth__input:focus {
outline: none;
background: #fff;
border-color: #050505;
}
.af-auth__pw { position: relative; }
.af-auth__peek {
position: absolute;
top: 0.8125rem;
right: 0.75rem;
padding: 0;
background: none;
border: 0;
font-family: inherit;
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7280;
cursor: pointer;
}
.af-auth__peek:hover { color: #050505; }
.af-auth__link {
padding: 0;
background: none;
border: 0;
font-family: inherit;
font-size: 0.75rem;
color: #832729;
cursor: pointer;
}
.af-auth__forgot {
display: block;
margin: -0.375rem 0 1rem auto;
}
.af-auth__submit {
width: 100%;
height: 2.75rem;
background: #050505;
color: #fff;
border: 0;
border-radius: 0.5rem;
font-family: inherit;
font-size: 0.875rem;
font-weight: 400;
line-height: 1rem;
letter-spacing: 0.02em;
text-transform: uppercase;
cursor: pointer;
}
.af-auth__submit:hover { background: #505050; }
.af-auth__or {
position: relative;
text-align: center;
margin: 1rem 0;
}
.af-auth__or::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e5e7eb;
}
.af-auth__or span {
position: relative;
padding: 0 0.75rem;
background: #fff;
font-size: 0.6875rem;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.af-auth__google {
display: flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
width: 100%;
height: 2.75rem;
background: #fff;
color: #050505;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 0.5rem;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
}
.af-auth__google:hover { background: #f9fafb; }
.af-auth__legal {
margin: 1.25rem 0 0;
font-size: 0.625rem;
line-height: 1rem;
color: #6b7280;
text-align: center;
}
.af-auth__legal a { color: #832729; text-decoration: underline; }
/* -- busy state ----------------------------------------------------------- */
.af-auth__busy {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.72);
border-radius: 0.75rem;
z-index: 2;
}
.af-auth__busy[hidden] { display: none; }
.af-auth__spinner {
width: 1.75rem;
height: 1.75rem;
border: 2px solid #e5e7eb;
border-top-color: #050505;
border-radius: 50%;
animation: af-spin 0.7s linear infinite;
}
@keyframes af-spin { to { transform: rotate(360deg); } }
/* The signed-in name chip Titan renders in the account popup. */
/* ==========================================================================
Category roundels above the hero
--------------------------------------------------------------------------
Two things to undo from Titan's rule. It sized its tiles 81 x 57 because its
own artwork was pre-cropped to that shape, which squashes a square source
into a rectangle. And the AudioFusion brand roundels are white lettering on
a *fully transparent* field — alpha 0 everywhere except the glyphs — so on
the white page they were invisible. The disc has to come from CSS.
========================================================================== */
.tw-category-tile__image figure {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
background: radial-gradient(circle at 50% 38%, #333 0%, #111 58%, #050505 100%);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.tw-category-tile__image figure > a,
.tw-category-tile__image figure picture {
display: block;
width: 100%;
height: 100%;
}
.tw-category-tile__image figure img {
width: 100%;
height: 100%;
max-height: none !important;
margin-bottom: 0 !important;
padding: 13%;
-o-object-fit: contain;
object-fit: contain;
}
.tw-category-tile__label {
margin-top: 0.5rem;
}
/* ==========================================================================
"Shop by Brands" strip, under the Made in India banner
--------------------------------------------------------------------------
Reuses Titan's .tw-category-tile so the roundels above match the ones above
the hero, but laid out as a static flex row instead of a slick carousel.
========================================================================== */
.af-brand-strip {
display: block;
padding: 2rem 1rem 0;
opacity: 1;
max-height: none;
overflow: visible;
}
.af-brand-strip__heading {
display: block;
font-family: var(--af-font-display);
font-weight: normal;
font-size: 1.125rem;
line-height: 1.625rem;
letter-spacing: 0;
color: #000;
opacity: 0.87;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
@media (min-width: 1024px) {
.af-brand-strip__heading {
font-size: 1.875rem;
line-height: 2.25rem;
margin-bottom: 1.5rem;
}
}
/* Four equal columns, so the row can never overflow a narrow phone the way a
fixed 81px + gap flex row does at 390px. */
.af-brand-strip__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
align-items: start;
gap: 0.75rem;
max-width: 22rem;
margin: 0 auto;
}
@media (min-width: 768px) {
.af-brand-strip__row {
gap: 2rem;
max-width: 44rem;
}
}
@media (min-width: 1024px) {
.af-brand-strip__row {
gap: 3.5rem;
max-width: 56rem;
}
}
.af-brand-strip__item {
width: 100%;
max-width: 5.0625rem;
}
@media (min-width: 1024px) {
.af-brand-strip__item { max-width: 8rem; }
}
.af-brand-strip__item .tw-category-tile,
.af-brand-strip__item .tw-slick-slide,
.af-brand-strip__item .tw-category-tile__wrapper,
.af-brand-strip__item .tw-category-tile__image {
/* Titan pins .tw-category-tile__image to 5.0625rem, which leaves the four
roundels different sizes once the grid column is narrower than that. */
width: 100% !important;
max-width: none;
padding-inline: 0;
}
.af-brand-strip__item .tw-category-tile__content {
font-size: 0.8125rem;
line-height: 1.25rem;
}
@media (min-width: 1024px) {
.af-brand-strip__item .tw-category-tile__content {
font-size: 1rem;
line-height: 1.5rem;
}
}
/* ==========================================================================
"Shop by Category" strip
--------------------------------------------------------------------------
Four category cards under the brand roundels. Horizontal on tablet and up,
stacked vertically on phones.
========================================================================== */
.af-cat-strip {
display: block;
padding: 2.5rem 1rem 0;
}
.af-cat-strip__heading {
font-family: var(--af-font-display);
font-weight: normal;
font-size: 1.125rem;
line-height: 1.625rem;
letter-spacing: 0;
color: #000;
opacity: 0.87;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
@media (min-width: 1024px) {
.af-cat-strip__heading {
font-size: 1.875rem;
line-height: 2.25rem;
margin-bottom: 1.5rem;
}
}
/* phones: one card per row, as asked */
.af-cat-strip__row {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
max-width: 26rem;
margin: 0 auto;
}
@media (min-width: 768px) {
.af-cat-strip__row {
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
max-width: 68rem;
}
}
@media (min-width: 1024px) {
.af-cat-strip__row { gap: 1.5rem; }
}
.af-cat-strip__item {
display: block;
text-decoration: none;
color: inherit;
}
.af-cat-strip__item:hover { text-decoration: none; color: inherit; }
/* The source art is square with the category name set across it, so a
portrait crop would slice the lettering off at both ends. */
.af-cat-strip__media {
overflow: hidden;
border-radius: 0.5rem;
background: #0b0b0b;
aspect-ratio: 1 / 1;
}
.af-cat-strip__media img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.af-cat-strip__item:hover .af-cat-strip__media img { transform: scale(1.04); }
.af-cat-strip__label {
display: block;
margin-top: 0.625rem;
text-align: center;
font-family: var(--af-font-display);
font-size: 0.875rem;
line-height: 1.3125rem;
font-weight: 500;
color: #050505;
}
@media (min-width: 1024px) {
.af-cat-strip__label { font-size: 1rem; line-height: 1.5rem; }
}
/* ==========================================================================
"Signup & Unlock Exclusive Benefits" — black theme
========================================================================== */
.signup-benefits-container {
background-color: #050505 !important;
}
.signup-benefits-container .signup-benefits-title,
.signup-benefits-container .benefit-text-wrapper .benefit-heading {
color: #fff;
}
.signup-benefits-container .benefit-text-wrapper .benefit-subheading {
color: rgba(255, 255, 255, 0.72);
}
.signup-benefits-container .signup-benefits-title .highlight-gold {
color: #dda243;
}
/* The benefit glyphs are dark-on-light PNGs; give each its own light chip so
they stay legible against the black panel. */
.signup-benefits-container .benefit-icon-wrapper {
border-radius: 0.5rem;
padding: 0.25rem;
background: rgba(255, 255, 255, 0.08);
}
/* On the black panel Titan's black primary button disappears. Its text colour
is pinned white by a rule this sheet cannot out-specify (background and
border override fine, colour does not), so rather than fight the cascade the
button becomes a white-outlined ghost — white text on black, deliberately. */
#loginButton.tw-benefits-login-button,
.signup-benefits-container .tw-benefits-login-button {
background: transparent !important;
background-color: transparent !important;
border: 1px solid #fff !important;
border-radius: 0.5rem;
}
#loginButton.tw-benefits-login-button:hover,
.signup-benefits-container .tw-benefits-login-button:hover {
background: rgba(255, 255, 255, 0.12) !important;
background-color: rgba(255, 255, 255, 0.12) !important;
}
/* ==========================================================================
GET STARTED panel — banner placement
--------------------------------------------------------------------------
Titan floated a small decorative SVG in the corner (position:absolute, top
55px, right 0). The AudioFusion artwork is a full banner that already
carries the heading and the call to action, so it becomes the top block of
the card — spanning it edge to edge, above the dashed rule on .layer-three —
and the now-duplicated headings are dropped.
Applies to both instances: the pinned desktop panel and the phone modal,
which share .titan-signup-widget-text-sec.
========================================================================== */
.titan-signup-widget-text-sec .signup-widget-body {
display: flex;
flex-direction: column;
}
.titan-signup-widget-text-sec .signup-widget-body .widget-bg-image,
.titan-signup-widget-text.expanded .titan-signup-widget-text-sec .widget-bg-image {
position: static !important;
order: -1; /* markup has it last; it belongs first */
top: auto !important;
right: auto !important;
width: 100% !important;
margin: 0 0 0.75rem;
line-height: 0;
}
.titan-signup-widget-text-sec .widget-bg-image img {
width: 100% !important;
height: auto;
display: block;
}
/* The banner repeats the heading and the "Sign Up for…" line, so the text
versions are redundant once it is in place — but only where the banner
actually is. The phone modal no longer carries one, so it is excluded here
and gets its copy back. */
.titan-signup-widget-text-sec:not(.modal) .signup-widget-titles,
.titan-signup-widget-text-sec:not(.modal) .signup-widget-body .layer-one,
.titan-signup-widget-text-sec:not(.modal) .signup-widget-body .layer-two {
display: none !important;
}
/* Bleed to the card edges, cancelling the panel's own padding. */
@media (min-width: 1024px) {
.titan-signup-widget-text-sec .signup-widget-body .widget-bg-image,
.titan-signup-widget-text.expanded .titan-signup-widget-text-sec .widget-bg-image {
width: calc(100% + 84px) !important; /* panel padding is 0 42px */
margin: -26px -42px 1rem;
}
}
/* -- phone modal ----------------------------------------------------------
The banner image has been taken out of the sheet, so everything the banner
used to stand in for — title, offer line, coupon label, the three benefit
icons — is what the sheet is now made of. It needs a surface of its own,
since the artwork was previously providing one.
------------------------------------------------------------------------- */
.titan-signup-widget-text-sec.modal .modal-content {
background: #fff;
border: 0;
border-radius: 0.75rem 0.75rem 0 0;
padding-bottom: 0.5rem;
}
.titan-signup-widget-text-sec.modal .modal-header {
border-bottom: 0;
padding: 1.5rem 1rem 0;
align-items: flex-start;
justify-content: space-between;
}
.titan-signup-widget-text-sec.modal .modal-body.signup-widget-body {
padding: 0.5rem 0 0;
}
/* ==========================================================================
Page loader
--------------------------------------------------------------------------
.veil .spinner is a remotely hosted Titan logo GIF. Swap the mark for the
AudioFusion one and drive it with the same slow pulse, keeping the existing
translate(-50%, -50%) the base rule relies on for centring.
========================================================================== */
.veil .spinner {
background-image: url("../audiofusion/img/audiofusion-logo.png") !important;
background-position: center center;
animation: af-loader-pulse 1.25s ease-in-out infinite !important;
-webkit-animation: af-loader-pulse 1.25s ease-in-out infinite !important;
}
@keyframes af-loader-pulse {
0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.9); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@-webkit-keyframes af-loader-pulse {
0%, 100% { opacity: 0.45; -webkit-transform: translate(-50%, -50%) scale(0.9); }
50% { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); }
}
/* --------------------------------------------------------------------------
Phone modal — close button
--------------------------------------------------------------------------
signinbannermobiles.jpg used to be a complete card mockup: it painted the
heading, the body copy, the dashed rule, the three benefit icons and a close
cross, so the image *was* the card and everything under it was either hidden
or reduced to an invisible hit target over the painted cross.
The banner is gone from the phone sheet now, so the sheet is built from its
own markup again (see "phone modal" above) and the close control has to be
something the user can actually see. Its ![]()
shipped with an empty src, so
it carries an inline SVG cross instead.
-------------------------------------------------------------------------- */
.titan-signup-widget-text-sec.modal .modal-header .close {
position: static;
width: 2rem;
height: 2rem;
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 0;
opacity: 1;
color: #6b7280;
cursor: pointer;
}
.titan-signup-widget-text-sec.modal .modal-header .close:hover { color: #050505; }
.titan-signup-widget-text-sec.modal .modal-header .close:focus-visible {
outline: 2px solid #050505;
outline-offset: 2px;
}
.af-modal-close-icon { display: block; }
.titan-signup-widget-text-sec.modal .widget-bg-image {
margin: 0 !important;
width: 100% !important;
}
/* The 8% inset lined the CTA up with the banner's inner card. With the banner
gone it lines up with the modal's own gutter instead, and the dashed rule
comes back to separate the benefits from the copy above them. */
.titan-signup-widget-text-sec.modal .layer-three {
border-top: 0.75px dashed #0006;
margin: 0 1rem;
padding: 1rem 0 0.5rem;
}
.titan-signup-widget-text-sec.modal .layer-three .icons {
width: 100%;
justify-content: space-between;
gap: 0.5rem;
}
.titan-signup-widget-text-sec.modal .layer-three .login-widget-signup {
width: 100%;
margin: 0;
}
/* ==========================================================================
Product rails — Speakers / Headphones / Earphones
--------------------------------------------------------------------------
Titan's tile language: square image on a tinted block, brand line above a
one-line name, price with struck MRP and a green saving, plus a wishlist
heart floated on the image. The row scrolls horizontally on phones.
========================================================================== */
.af-prail {
padding: 2.5rem 1rem 0;
max-width: 90rem;
margin: 0 auto;
}
@media (min-width: 1024px) {
.af-prail { padding: 3rem 2.5rem 0; }
}
.af-prail__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.af-prail__heading {
font-family: var(--af-font-display);
font-size: 1.125rem;
line-height: 1.625rem;
font-weight: 500;
letter-spacing: 0;
color: #000;
opacity: 0.87;
text-transform: uppercase;
margin: 0;
}
@media (min-width: 1024px) {
.af-prail__heading { font-size: 1.375rem; line-height: 2rem; }
}
.af-prail__more {
display: inline-flex;
align-items: center;
gap: 0.375rem;
flex: 0 0 auto;
font-family: var(--af-font-display);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #050505;
text-decoration: none;
border-bottom: 1px solid #050505;
padding-bottom: 2px;
}
.af-prail__more:hover { color: #050505; text-decoration: none; opacity: 0.7; }
.af-prail__chev {
width: 0.375rem;
height: 0.375rem;
border-right: 1.4px solid currentColor;
border-bottom: 1.4px solid currentColor;
transform: rotate(-45deg);
}
/* Phones: a snap-scrolling rail. Desktop: a four-up grid. */
.af-prail__row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 62%;
gap: 0.75rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.5rem;
scrollbar-width: none;
}
.af-prail__row::-webkit-scrollbar { display: none; }
.af-prail__row > * { scroll-snap-align: start; }
@media (min-width: 576px) {
.af-prail__row { grid-auto-columns: 38%; }
}
@media (min-width: 1024px) {
.af-prail__row {
grid-auto-flow: row;
grid-template-columns: repeat(4, 1fr);
grid-auto-columns: auto;
gap: 1.5rem;
overflow: visible;
}
}
/* -- the tile ------------------------------------------------------------- */
.af-ptile {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
}
.af-ptile__media {
position: relative;
background: #f6f6f6;
border-radius: 0.5rem;
overflow: hidden;
aspect-ratio: 1 / 1;
}
/* Must exclude the wishlist anchor: it is also a direct child , and this
selector outranks .af-ptile__wish, which stretched the heart's white pill
across the whole tile and greyed the product out. */
.af-ptile__media > a:not(.af-ptile__wish) {
display: block;
width: 100%;
height: 100%;
}
/* No mix-blend-mode here: the product shots already sit on white, so it buys
nothing, and blending against a huge composited backdrop renders the tiles
washed out. */
.af-ptile__media img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
padding: 8%;
transition: transform 0.45s ease;
}
.af-ptile:hover .af-ptile__media img { transform: scale(1.05); }
/* discount ribbon, bottom-left as on Titan's tiles */
.af-ptile__media .batch {
position: absolute;
left: 0.5rem;
bottom: 0.5rem;
z-index: 2;
}
.af-ptile__media .batch:empty { display: none; }
.af-ptile__media .batch span {
display: inline-block;
padding: 0.25rem 0.375rem;
background: #fff;
color: #832729;
border-radius: 0.125rem;
font-family: var(--af-font-display);
font-size: 0.6875rem;
font-weight: 600;
line-height: 1;
}
.af-ptile__media .out-of-stock {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.72);
z-index: 2;
pointer-events: none;
}
.af-ptile__media .out-of-stock:empty { display: none; }
/* Superseded by .af-status, which carries all three states in one restrained
chip. Only the colour and weight are unset here — the old rule shouted a
red 600-weight "OUT OF STOCK" over every card, which is precisely the
treatment the availability work replaces. */
.af-ptile__media .out-of-stock span {
font-family: var(--af-font-display);
font-size: 0.75rem;
font-weight: var(--af-fw-medium);
color: inherit;
text-transform: uppercase;
}
.af-ptile__media > a.af-ptile__wish,
.af-ptile__wish {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
background: rgba(255, 255, 255, 0.92);
border-radius: 50%;
color: #050505;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.af-ptile__wish:hover { background: #fff; color: #832729; }
/* -- body ----------------------------------------------------------------- */
.af-ptile__body {
padding: 0.625rem 0 0;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.af-ptile__brand {
font-family: var(--af-font-display);
font-size: 0.75rem;
font-weight: 500;
line-height: 1;
color: #050505;
margin-bottom: 0.25rem;
}
.af-ptile__link { text-decoration: none; }
.af-ptile__link:hover { text-decoration: none; }
.af-ptile__link h6,
.af-ptile__link .af-ptile__h {
font-family: var(--af-font-display);
font-size: 0.75rem;
line-height: 1.125rem;
/* 500 rather than the old 400: at 12px Space Grotesk needs the extra step
to hold the same weight on the page that Poppins 400 did. */
font-weight: var(--af-fw-medium);
color: #374151;
text-transform: capitalize;
margin: 0 0 0.375rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.25rem;
}
.af-ptile [class^="pricetotal_"],
.af-ptile [class*=" pricetotal_"] { margin-bottom: 0.625rem; }
.af-ptile .price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.375rem;
margin: 0;
font-family: var(--af-font-display);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.0625rem;
color: #050505;
}
.af-ptile .price del {
font-size: 0.75rem;
font-weight: 400;
color: #6b7280;
}
.af-ptile__cart {
margin-top: auto;
width: 100%;
height: 2.25rem;
background: #050505;
color: #fff;
border: 0;
border-radius: 0.5rem;
font-family: var(--af-font-display);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
cursor: pointer;
}
.af-ptile__cart:hover { background: #505050; }
/* ==========================================================================
Catalogue pages — listing (PLP) and product detail (PDP)
========================================================================== */
.af-crumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem;
list-style: none;
margin: 0 0 1rem;
padding: 0;
}
.af-crumb li {
font-family: var(--af-font-display);
font-size: 0.6875rem;
line-height: 1rem;
color: #6b7280;
text-transform: capitalize;
}
.af-crumb li + li::before {
content: "›";
margin-right: 0.375rem;
color: #9ca3af;
}
.af-crumb a { color: #6b7280; text-decoration: none; }
.af-crumb a:hover { color: #050505; }
.af-crumb li[aria-current] { color: #050505; font-weight: 500; }
/* -- listing --------------------------------------------------------------- */
.af-plp__inner,
.af-pdp__inner {
max-width: 90rem;
margin: 0 auto;
padding: 1.25rem 1rem 3rem;
}
@media (min-width: 1024px) {
.af-plp__inner,
.af-pdp__inner { padding: 1.5rem 2.5rem 4rem; }
}
.af-plp__head {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.af-plp__title {
font-family: var(--af-font-display);
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 500;
text-transform: uppercase;
color: #000;
opacity: 0.87;
margin: 0;
}
@media (min-width: 1024px) {
.af-plp__title { font-size: 1.75rem; line-height: 2.25rem; }
}
.af-plp__count {
font-family: var(--af-font-display);
font-size: 0.75rem;
color: #6b7280;
}
/* --------------------------------------------------------------------------
Category sections on brand / all-brands pages
--------------------------------------------------------------------------
A brand page used to be one flat grid. Bose alone is 25 products across
line arrays, subwoofers, mixers, installed loudspeakers and five kinds of
accessory, so the grid is split into ordered, labelled groups. The heading
is a quiet rule-and-label rather than a banner: it has to organise the page
without competing with the product cards for attention. */
.af-plp__cat { margin-bottom: 2.5rem; }
.af-plp__cat:last-child { margin-bottom: 0; }
.af-plp__cat-h {
display: flex;
align-items: baseline;
gap: 0.625rem;
margin: 0 0 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e5e7eb;
font-family: var(--af-font-display);
font-size: 0.9375rem;
line-height: 1.5rem;
font-weight: var(--af-fw-semibold);
letter-spacing: var(--af-tracking-tight);
color: #050505;
}
/* The count is supporting information, so it reads as such and never wraps
onto its own line away from the label it belongs to. */
.af-plp__cat-n {
font-size: 0.6875rem;
font-weight: var(--af-fw-regular);
letter-spacing: var(--af-tracking-label);
color: #6b7280;
white-space: nowrap;
}
@media (min-width: 768px) {
.af-plp__cat { margin-bottom: 3rem; }
.af-plp__cat-h { font-size: 1.0625rem; line-height: 1.625rem; }
}
/* On a narrow screen the rule plus 2.5rem of air between every group eats the
viewport, so tighten the rhythm rather than dropping the grouping. */
@media (max-width: 480px) {
.af-plp__cat { margin-bottom: 2rem; }
.af-plp__cat-h { margin-bottom: 0.75rem; font-size: 0.875rem; }
}
.af-plp__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem 0.75rem;
}
@media (min-width: 768px) {
.af-plp__grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem 1.25rem; }
}
@media (min-width: 1024px) {
.af-plp__grid { grid-template-columns: repeat(4, 1fr); gap: 2.25rem 1.5rem; }
}
.af-plp__empty {
font-family: var(--af-font-body);
font-size: 0.875rem;
color: #374151;
padding: 3rem 0;
text-align: center;
}
.af-plp__empty a { color: #832729; text-decoration: underline; }
/* -- product detail -------------------------------------------------------- */
.af-pdp__cols {
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
}
@media (min-width: 1024px) {
.af-pdp__cols { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; }
}
.af-pdp__gallery {
display: grid;
grid-template-columns: 4.5rem 1fr;
gap: 0.75rem;
align-items: start;
}
.af-pdp__thumbs {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.af-pdp__thumbs img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
background: #f6f6f6;
border: 1px solid transparent;
border-radius: 0.375rem;
padding: 6%;
cursor: pointer;
}
.af-pdp__thumbs img.active { border-color: #050505; }
.af-pdp__stage {
position: relative;
background: #f6f6f6;
border-radius: 0.5rem;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.af-pdp__stage img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: 6%;
opacity: 0;
transition: opacity 0.25s ease;
}
.af-pdp__stage img.active { opacity: 1; }
.af-pdp__brand {
display: block;
font-family: var(--af-font-display);
font-size: 0.8125rem;
font-weight: 500;
color: #050505;
margin-bottom: 0.25rem;
}
.af-pdp__buy h4 {
font-family: var(--af-font-display);
font-size: 1.125rem;
line-height: 1.75rem;
/* One step up from the old Poppins 400: Space Grotesk sets lighter at the
same weight, and this is the product's name. */
font-weight: var(--af-fw-semibold);
color: #1d1d1d;
margin: 0 0 0.875rem;
}
@media (min-width: 1024px) {
.af-pdp__buy h4 { font-size: 1.375rem; line-height: 2rem; }
}
.af-pdp__price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.625rem;
margin-bottom: 0.625rem;
}
.af-pdp__price > span {
font-family: var(--af-font-display);
font-size: 1.375rem;
font-weight: 600;
color: #050505;
}
.af-pdp__price del {
font-size: 0.9375rem;
font-weight: 400;
color: #6b7280;
margin-left: 0.5rem;
}
.af-pdp__save {
font-family: var(--af-font-display);
font-size: 0.8125rem;
font-weight: 500;
color: #3d9337;
}
.af-pdp__stock {
font-family: var(--af-font-display);
font-size: 0.75rem;
color: #6b7280;
margin-bottom: 1.25rem;
}
.af-pdp__stock .status-stock { color: #050505; font-weight: 500; }
.af-pdp__qty {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.af-pdp__qty label {
font-family: var(--af-font-display);
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #374151;
margin: 0;
}
.af-pdp__qty input {
width: 4.5rem;
height: 2.5rem;
padding: 0 0.625rem;
background: #f9fafb;
border: 1px solid rgba(0, 0, 0, 0.101961);
border-radius: 0.5rem;
font-family: var(--af-font-body);
font-size: 0.875rem;
}
.af-pdp__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 1rem;
}
.af-pdp__cart,
.af-pdp__buynow {
height: 3rem;
border: 0;
border-radius: 0.5rem;
font-family: var(--af-font-display);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
cursor: pointer;
}
.af-pdp__cart { background: #050505; color: #fff; }
.af-pdp__cart:hover { background: #505050; }
.af-pdp__buynow {
background: #f9fafb;
color: #050505;
border: 1px solid #050505;
}
.af-pdp__buynow:hover { background: #e5e7eb; }
.af-pdp__wish {
display: inline-block;
font-family: var(--af-font-display);
font-size: 0.75rem;
color: #832729;
text-decoration: underline;
margin-bottom: 1.5rem;
}
.af-pdp__usp {
list-style: none;
margin: 0;
padding: 1.25rem 0 0;
border-top: 1px solid #e5e7eb;
}
.af-pdp__usp li {
position: relative;
font-family: var(--af-font-body);
font-size: 0.8125rem;
line-height: 1.5rem;
color: #374151;
padding-left: 1.25rem;
}
.af-pdp__usp li::before {
content: "";
position: absolute;
left: 0;
top: 0.6875rem;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background: #dda243;
}
/* ==========================================================================
Mega-menu feature panel
--------------------------------------------------------------------------
Titan's .menu-thumbnail is a single campaign image pinned to the right 35%
of the dropdown. AudioFusion puts real merchandise there instead — brand
roundels under Brands, top products under each category.
========================================================================== */
/* Titan's `.header-menu-ul .dropdown-menu .menu-thumbnail` is a centred flex
box sized for one image; it squeezes this panel's heading into a vertical
sliver. Match its specificity to lay the panel out as a block. */
.header-menu-ul .dropdown-menu .menu-thumbnail.af-mm,
.menu-thumbnail.af-mm {
display: block;
width: 42%;
height: auto;
padding: 1.75rem 2.5rem;
align-items: flex-start;
justify-content: flex-start;
}
/* the link column then takes what's left */
.header-menu-ul .dropdown-menu:has(.af-mm) > ul {
width: 58%;
height: auto;
min-height: 22rem;
}
.af-mm__title {
font-family: var(--af-font-display);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6b7280;
margin: 0 0 1rem;
}
/* -- brands ---------------------------------------------------------------- */
.af-mm__brands {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem 0.75rem;
}
.af-mm__brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4375rem;
text-decoration: none;
}
.af-mm__brand:hover { text-decoration: none; }
.af-mm__brand-disc {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
background: radial-gradient(circle at 50% 38%, #333 0%, #111 58%, #050505 100%);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.af-mm__brand-disc img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 13%;
}
.af-mm__brand-name {
font-family: var(--af-font-display);
font-size: 0.6875rem;
line-height: 1rem;
color: #374151;
text-align: center;
}
.af-mm__brand:hover .af-mm__brand-name { color: #050505; }
/* -- products -------------------------------------------------------------- */
.af-mm__prods {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.af-mm__prod {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
padding: 0.375rem;
border-radius: 0.5rem;
}
.af-mm__prod:hover {
background: rgba(221, 162, 67, 0.06);
text-decoration: none;
}
.af-mm__prod-img {
flex: 0 0 auto;
width: 3.5rem;
height: 3.5rem;
border-radius: 0.375rem;
background: #f6f6f6;
overflow: hidden;
}
.af-mm__prod-img img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 8%;
}
.af-mm__prod-txt {
display: flex;
flex-direction: column;
min-width: 0;
}
.af-mm__prod-name {
font-family: var(--af-font-display);
font-size: 0.75rem;
line-height: 1.125rem;
color: #374151;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.af-mm__prod-price {
font-family: var(--af-font-display);
font-size: 0.8125rem;
font-weight: 600;
color: #050505;
margin-top: 0.125rem;
}
/* The panel is taller than Titan's single image, so let the dropdown grow. */
.header-menu-ul .dropdown-menu .menu-thumbnail.af-mm { height: auto; }
/* Made-in-India style banner inside a listing page. */
.af-plp__banner {
margin: 0 0 1.75rem;
border-radius: 0.5rem;
overflow: hidden;
}
.af-plp__banner img { width: 100%; height: auto; display: block; }
/* ==========================================================================
Minicart popup
========================================================================== */
.cart-icon { position: relative; }
.af-minicart {
position: absolute;
top: calc(100% + 0.75rem);
right: 0;
z-index: 40;
width: 20rem;
max-width: calc(100vw - 2rem);
background: #fff;
border: 1px solid #ebebeb;
border-radius: 0.5rem;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
padding: 1rem;
font-family: var(--af-font-body);
text-align: left;
}
.af-minicart[hidden] { display: none; }
.af-minicart__empty {
font-size: 0.8125rem;
color: #6b7280;
text-align: center;
padding: 1rem 0;
}
.af-minicart__list { max-height: 17rem; overflow-y: auto; }
.af-minicart__row {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0;
border-bottom: 1px solid #f2f2f2;
}
.af-minicart__thumb {
flex: 0 0 auto;
width: 2.75rem;
height: 2.75rem;
background: #f6f6f6;
border-radius: 0.375rem;
overflow: hidden;
}
.af-minicart__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.af-minicart__txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.af-minicart__name {
font-size: 0.75rem;
line-height: 1.125rem;
color: #374151;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.af-minicart__qty { font-size: 0.6875rem; color: #6b7280; margin-top: 0.125rem; }
.af-minicart__rm {
flex: 0 0 auto;
background: none;
border: 0;
color: #9ca3af;
font-size: 1.125rem;
line-height: 1;
cursor: pointer;
padding: 0 0.125rem;
}
.af-minicart__rm:hover { color: #bf4815; }
.af-minicart__note {
font-size: 0.625rem;
line-height: 1rem;
color: #6b7280;
margin: 0.625rem 0 0;
}
.af-minicart__total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.75rem 0 0.875rem;
font-size: 0.8125rem;
color: #374151;
}
.af-minicart__total strong { font-size: 1rem; color: #050505; }
.af-minicart__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.af-minicart__view,
.af-minicart__pay {
display: flex;
align-items: center;
justify-content: center;
height: 2.5rem;
border-radius: 0.5rem;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
cursor: pointer;
border: 1px solid #050505;
}
.af-minicart__view { background: #f9fafb; color: #050505 !important; text-decoration: none; }
.af-minicart__view:hover { background: #e5e7eb; text-decoration: none; }
.af-minicart__pay { background: #050505; color: #fff; border-color: #050505; }
.af-minicart__pay:hover { background: #505050; }
/* ==========================================================================
Account / cart page
========================================================================== */
.af-acct__inner {
max-width: 60rem;
margin: 0 auto;
padding: 1.25rem 1rem 4rem;
font-family: var(--af-font-body);
}
@media (min-width: 1024px) { .af-acct__inner { padding: 1.5rem 2.5rem 5rem; } }
.af-acct__tabs {
display: flex;
gap: 1.5rem;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 2rem;
}
.af-acct__tab {
padding: 0.625rem 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #6b7280;
text-decoration: none;
}
.af-acct__tab.is-active,
.af-acct__tab:hover { color: #050505; border-bottom-color: #050505; text-decoration: none; }
.af-acct__line {
display: grid;
grid-template-columns: 3.5rem 1fr auto auto;
align-items: center;
gap: 1rem;
padding: 0.875rem 0;
border-bottom: 1px solid #f2f2f2;
}
.af-acct__thumb {
width: 3.5rem; height: 3.5rem;
background: #f6f6f6; border-radius: 0.375rem; overflow: hidden;
}
.af-acct__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.af-acct__name { font-size: 0.8125rem; color: #374151; }
.af-acct__qty { font-size: 0.8125rem; color: #6b7280; white-space: nowrap; }
.af-acct__rm {
background: none; border: 0; color: #9ca3af;
font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.af-acct__rm:hover { color: #bf4815; }
.af-acct__empty { font-size: 0.8125rem; color: #6b7280; padding: 1.5rem 0; }
.af-acct__foot {
display: flex; justify-content: space-between; align-items: baseline;
padding: 1rem 0 1.25rem; font-size: 0.875rem; color: #374151;
}
.af-acct__foot strong { font-size: 1.125rem; color: #050505; }
.af-acct__pay {
width: 100%; max-width: 18rem; height: 3rem;
background: #050505; color: #fff; border: 0; border-radius: 0.5rem;
font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em;
text-transform: uppercase; cursor: pointer;
}
.af-acct__pay:hover { background: #505050; }
/* price-on-request tiles */
.af-ptile__por { color: #374151 !important; font-weight: 500 !important; font-size: 0.8125rem !important; }
a.af-ptile__enquire {
display: flex; align-items: center; justify-content: center;
text-decoration: none; color: #050505 !important;
background: #f9fafb; border: 1px solid #050505;
}
a.af-ptile__enquire:hover { background: #e5e7eb; text-decoration: none; color: #050505 !important; }
/* ==========================================================================
PDP — description and specifications
========================================================================== */
.af-pdp__info {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #e5e7eb;
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}
@media (min-width: 1024px) {
.af-pdp__info { grid-template-columns: 1.15fr 1fr; gap: 4rem; }
}
.af-pdp__info h5 {
font-family: var(--af-font-display);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #050505;
margin: 0 0 1rem;
}
.af-pdp__desc {
font-family: var(--af-font-body);
font-size: 0.875rem;
line-height: 1.6;
color: #374151;
}
.af-pdp__desc h3,
.af-pdp__desc strong {
display: block;
font-size: 1rem;
font-weight: 600;
color: #050505;
margin: 0 0 0.5rem;
}
.af-pdp__desc p { margin: 0 0 0.875rem; }
.af-pdp__desc p:last-child { margin-bottom: 0; }
.af-pdp__specs table {
width: 100%;
border-collapse: collapse;
font-family: var(--af-font-body);
font-size: 0.8125rem;
}
.af-pdp__specs tr { border-bottom: 1px solid #f2f2f2; }
.af-pdp__specs tr:last-child { border-bottom: 0; }
.af-pdp__specs th {
width: 45%;
padding: 0.625rem 0.75rem 0.625rem 0;
text-align: left;
font-weight: 400;
color: #6b7280;
vertical-align: top;
}
.af-pdp__specs td {
padding: 0.625rem 0;
color: #050505;
font-weight: 500;
}
.af-pdp__por {
font-family: var(--af-font-display);
font-size: 1.125rem;
font-weight: 500;
color: #374151;
}
a.af-pdp__cart {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
grid-column: 1 / -1;
}
a.af-pdp__cart:hover { text-decoration: none; color: #fff; }
/* ==========================================================================
Login modal — small screens
--------------------------------------------------------------------------
The desktop sizing (26.25rem card, 2rem padding, 4.5rem logo) overflows a
360px phone and pushes the Google button below the fold.
========================================================================== */
@media (max-width: 575.98px) {
.af-auth-modal .modal-dialog {
max-width: none;
margin: 0;
min-height: 100%;
align-items: flex-end;
}
.af-auth-modal .modal-content {
border-radius: 1rem 1rem 0 0;
padding: 1.25rem 1.125rem calc(1.25rem + env(safe-area-inset-bottom));
max-height: 92vh;
overflow-y: auto;
}
.af-auth__logo { height: 3rem; margin-bottom: 0.5rem; }
.af-auth__title { font-size: 1rem; line-height: 1.5rem; }
.af-auth__sub { font-size: 0.6875rem; line-height: 1rem; }
.af-auth__head { margin-bottom: 0.875rem; }
.af-auth__tabs { margin-bottom: 1rem; }
.af-auth__label { font-size: 0.625rem; margin-bottom: 0.25rem; }
.af-auth__input,
.af-auth__submit,
.af-auth__google {
height: 2.75rem; /* keep the 44px touch target */
font-size: 1rem; /* iOS zooms anything under 16px */
}
.af-auth__input { margin-bottom: 0.75rem; }
.af-auth__or { margin: 0.75rem 0; }
.af-auth__legal { margin-top: 1rem; font-size: 0.5625rem; }
.af-auth__close { top: 0.5rem; right: 0.5rem; }
}
/* ==========================================================================
Customer reviews
========================================================================== */
.af-rev__inner {
max-width: 90rem;
margin: 0 auto;
padding: 3rem 1rem 0;
}
@media (min-width: 1024px) { .af-rev__inner { padding: 3.5rem 2.5rem 0; } }
.af-rev__summary {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
padding-bottom: 1.25rem;
margin-bottom: 1.75rem;
border-bottom: 1px solid #e5e7eb;
}
.af-rev__heading {
font-family: var(--af-font-display);
font-size: 1.125rem;
line-height: 1.625rem;
font-weight: 500;
text-transform: uppercase;
color: #000;
opacity: 0.87;
margin: 0 0 0.25rem;
}
@media (min-width: 1024px) {
.af-rev__heading { font-size: 1.375rem; line-height: 2rem; }
}
.af-rev__place {
font-family: var(--af-font-body);
font-size: 0.75rem;
color: #6b7280;
margin: 0;
}
.af-rev__score {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.af-rev__value {
font-family: var(--af-font-display);
font-size: 1.5rem;
font-weight: 600;
color: #050505;
line-height: 1;
}
.af-rev__star { color: #f5a623; font-size: 0.875rem; }
.af-rev__count {
font-family: var(--af-font-body);
font-size: 0.75rem;
color: #6b7280;
}
.af-rev__row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 80%;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 0.5rem;
scrollbar-width: none;
}
.af-rev__row::-webkit-scrollbar { display: none; }
.af-rev__row > * { scroll-snap-align: start; }
@media (min-width: 768px) {
.af-rev__row {
grid-auto-flow: row;
grid-template-columns: repeat(2, 1fr);
grid-auto-columns: auto;
overflow: visible;
}
}
@media (min-width: 1024px) {
.af-rev__row { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
.af-rev__card {
margin: 0;
padding: 1.25rem;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
display: flex;
flex-direction: column;
}
.af-rev__head {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.af-rev__avatar {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: #dda243;
color: #050505;
font-family: var(--af-font-body);
font-weight: 600;
font-size: 0.875rem;
flex: 0 0 auto;
}
.af-rev__name {
font-family: var(--af-font-display);
font-size: 0.8125rem;
font-weight: 500;
color: #050505;
margin: 0 0 0.125rem;
}
.af-rev__stars { display: block; line-height: 1; }
.af-rev__text {
font-family: var(--af-font-body);
font-size: 0.75rem;
line-height: 1.5;
color: #374151;
margin: 0 0 0.875rem;
flex: 1 1 auto;
}
.af-rev__time {
font-family: var(--af-font-body);
font-size: 0.6875rem;
color: #9ca3af;
}
/* ==========================================================================
Sign-up banner
========================================================================== */
.af-signup { margin-top: 3rem; }
.af-signup__link { display: block; }
.af-signup__link img {
width: 100%;
height: auto;
display: block;
}
/* ==========================================================================
Signup benefits — spacing
--------------------------------------------------------------------------
Titan's benefits strip is a mobileGrid1r1c experience component whose
bottom margin only applies inside #homepage. Once the surrounding sections
were replaced it sat flush against the Made in India banner.
========================================================================== */
.signup-benefits-container {
margin-bottom: 2.5rem;
}
@media (min-width: 1024px) {
.signup-benefits-container { margin-bottom: 3.5rem; }
}
.experience-commerce_layouts-mobileGrid1r1c + .experience-commerce_assets-imageAndButton,
.experience-commerce_layouts-mobileGrid1r1c {
margin-bottom: 1.5rem;
}
/* ==========================================================================
Sign-up banner — sizing
--------------------------------------------------------------------------
The artwork is a card, not a full-bleed hero: cap it and centre it so it
does not span the whole viewport on a laptop.
========================================================================== */
.af-signup {
margin: 3rem auto 0;
padding: 0 1rem;
max-width: 34rem;
}
@media (min-width: 768px) {
.af-signup {
max-width: 46rem;
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.af-signup {
max-width: 56rem;
padding: 0 2.5rem;
}
}
.af-signup__link {
display: block;
border-radius: 0.75rem;
overflow: hidden;
}
.af-signup__link img {
width: 100%;
height: auto;
display: block;
}
/* ==========================================================================
Search suggestions dropdown
========================================================================== */
.search-bar-container, .site-search, .t-search-header { position: relative; }
.af-sugg {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
z-index: 60;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
overflow: hidden;
font-family: var(--af-font-body);
}
.af-sugg[hidden] { display: none; }
.af-sugg__row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
text-decoration: none;
border-bottom: 1px solid #f2f2f2;
}
.af-sugg__row:hover { background: #f9fafb; text-decoration: none; }
.af-sugg__img {
flex: 0 0 auto;
width: 2.5rem;
height: 2.5rem;
background: #f6f6f6;
border-radius: 0.375rem;
overflow: hidden;
}
.af-sugg__img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.af-sugg__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.af-sugg__name {
font-size: 0.75rem;
line-height: 1.125rem;
color: #374151;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.af-sugg__brand { font-size: 0.625rem; color: #9ca3af; }
.af-sugg__price {
flex: 0 0 auto;
font-size: 0.75rem;
font-weight: 600;
color: #050505;
white-space: nowrap;
}
.af-sugg__all {
display: block;
padding: 0.625rem;
text-align: center;
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #050505 !important;
background: #f9fafb;
text-decoration: none;
}
.af-sugg__all:hover { background: #e5e7eb; text-decoration: none; }
.af-sugg__none { padding: 0.875rem; margin: 0; font-size: 0.75rem; color: #6b7280; }
/* ==========================================================================
Account popup — anchored under the account icon
--------------------------------------------------------------------------
This was a dark panel, and it rendered as an unreadable black rectangle.
The background took, but the text did not: Titan styles the same nodes
through `.account-pop.tw-login-section .tw-login-heading` and
`.guest-user-upper-section .account-header`, both a class deeper than the
rules that were trying to lighten them, so the headings stayed at #1d1d1d
and #050505 — near-black on black.
Winning that fight would mean out-specifying every one of those rules, and
the panel has more light-coloured children waiting (.tw-login-info carries
its own #f1fffc, .logout-button its own #bf4815). Titan's palette here is
already correct against a white panel and it matches the white header above
it, so the panel goes back to light and only the shape is ours.
========================================================================== */
header .account-pop,
header .account-pop.tw-login-section {
left: auto;
right: 0;
transform: translateY(0.5rem);
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
padding-bottom: 0.5rem;
min-width: 17rem;
overflow: hidden;
}
/* The primary button is Titan's teal by default; black is ours. Stated at the
same depth Titan uses, so no !important is needed for the text. */
header .account-pop.tw-login-section .account-pop-cta .signuplogin .tw-new-signlogin-button,
header .account-pop .tw-btn-primary,
header .account-pop #loginButton {
background: #050505 !important;
border: 0 !important;
}
header .account-pop.tw-login-section .account-pop-cta .signuplogin .tw-new-signlogin-button .tw-login-signup-text,
header .account-pop .tw-btn-primary span,
header .account-pop #loginButton span,
header .account-pop #loginButton .text-btn { color: #fff !important; }
header .account-pop ul li:hover { background: #f6f6f6; }
/* The signed-in block af-bridge injects sits in the same panel, so it follows
the same palette rather than the dark one it was written against. */
header .account-pop .af-signed-in .account-header { color: #050505; }
header .account-pop .af-signed-in .access-acount-text { color: #6b7280; }
/* ==========================================================================
Home page rhythm — halve the gaps the brief called out
========================================================================== */
.af-brand-strip { padding-top: 1.25rem; }
.af-cat-strip { padding-top: 1.25rem; }
.signup-benefits-container { margin-bottom: 1.25rem; }
@media (min-width: 1024px) {
.af-brand-strip { padding-top: 1.75rem; }
.af-cat-strip { padding-top: 1.75rem; }
.signup-benefits-container { margin-bottom: 1.75rem; }
}
/* ==========================================================================
Sign-up banner — square edges, roomier on laptops
========================================================================== */
.af-signup {
margin: 2.5rem auto 0;
padding: 0 1rem;
max-width: none;
}
.af-signup__link {
display: block;
border: 0;
border-radius: 0;
overflow: visible;
max-width: 30rem;
margin: 0 auto;
}
@media (min-width: 768px) {
.af-signup { padding: 0 2rem; }
.af-signup__link { max-width: 62rem; }
}
@media (min-width: 1024px) {
/* matches the Made in India banner's gutters */
.af-signup { padding: 0 2.5rem; }
.af-signup__link { max-width: 86rem; }
}
.af-signup__link img {
width: 100%;
height: auto;
display: block;
border: 0;
border-radius: 0;
}
/* The signed-in name replaces the "Account" caption — black, beside the icon. */
.menu.account .af-user-name {
color: #050505 !important;
font-weight: 500;
opacity: 1 !important;
max-width: 8rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (min-width: 1280px) {
.menu.account .af-user-name { display: block !important; }
}
/* ==========================================================================
Contact Us
--------------------------------------------------------------------------
Home/ContactUs.html runs on the same static-page shell as the FAQ and
delivery pages, but Titan's `.static-pages` / `.overview-info` / `.faq-footer`
rules never made it into this mirror's global.css. Everything the page needs
is therefore drawn here, scoped under .af-contact so it can't leak onto the
other static pages if those rules ever turn up.
========================================================================== */
.af-contact {
font-family: var(--af-font-body);
color: #050505;
padding-bottom: 0;
}
.af-contact .product-breadcrumb .breadcrumb-item,
.af-contact .product-breadcrumb .breadcrumb-item a {
font-size: 0.75rem;
color: #6b7280;
text-decoration: none;
}
.af-contact .product-breadcrumb .breadcrumb-item:last-child a { color: #050505; }
/* -- intro ----------------------------------------------------------------- */
.af-contact__intro {
padding-top: 0.5rem;
padding-bottom: 1.5rem;
}
.af-contact__title {
font-family: var(--af-font-display);
font-size: 1.5rem;
font-weight: 500;
letter-spacing: 0.01em;
margin: 0 0 0.5rem;
}
.af-contact__lede {
max-width: 44rem;
margin: 0;
font-size: 0.875rem;
line-height: 1.6;
color: #6b7280;
}
@media (min-width: 1024px) {
.af-contact__title { font-size: 1.75rem; }
}
/* Section captions, borrowing the storefront's dashboard heading treatment. */
.af-contact .overview-info h3 {
font-size: 0.8125rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #050505;
margin: 0 0 1.125rem;
padding-bottom: 0.625rem;
border-bottom: 1px solid #e5e7eb;
}
/* -- left column: the reachable facts -------------------------------------- */
.af-contact__body { padding-bottom: 2.5rem; }
.af-contact__aside { padding-left: 0; padding-right: 0; }
@media (min-width: 992px) {
.af-contact__aside { padding-right: 3rem; }
}
.af-contact__list {
list-style: none;
margin: 0;
padding: 0;
}
.af-contact__item {
padding: 0 0 1.125rem;
margin-bottom: 1.125rem;
border-bottom: 1px solid #f2f2f2;
}
.af-contact__item:last-child {
border-bottom: 0;
margin-bottom: 0;
}
.af-contact__item-label {
display: block;
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7280;
margin-bottom: 0.3125rem;
}
.af-contact__item-value {
display: block;
font-size: 0.9375rem;
line-height: 1.5;
color: #050505;
text-decoration: none;
}
a.af-contact__item-value:hover {
color: #832729;
text-decoration: underline;
}
.af-contact__links {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1.75rem;
padding-top: 1.25rem;
border-top: 1px solid #e5e7eb;
}
.af-contact__links a {
font-size: 0.8125rem;
color: #374151;
text-decoration: none;
}
.af-contact__links a:hover {
color: #832729;
text-decoration: underline;
}
/* -- right column: the enquiry form ---------------------------------------- */
.af-contact__form-col {
padding-left: 0;
padding-right: 0;
margin-top: 2.5rem;
}
@media (min-width: 992px) {
.af-contact__form-col { margin-top: 0; }
}
/* Bootstrap's .col padding would double up on the gutter the two halves already
carry, so the halves are padded by hand and only on the wide layout. */
.af-contact__field-left,
.af-contact__field-right { padding-left: 0; padding-right: 0; }
@media (min-width: 768px) {
.af-contact__field-left { padding-right: 0.5rem; padding-left: 0; }
.af-contact__field-right { padding-left: 0.5rem; padding-right: 0; }
}
.af-contact__label {
display: block;
font-size: 0.6875rem;
font-weight: 500;
color: #374151;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 0.3125rem;
}
.af-contact__label span {
color: #832729;
margin-left: 0.125rem;
}
.af-contact__input {
width: 100%;
height: 2.75rem;
padding: 0 0.875rem;
margin-bottom: 0.875rem;
background: #f9fafb;
border: 1px solid rgba(0, 0, 0, 0.101961);
border-radius: 0.5rem;
font-family: inherit;
font-size: 0.8125rem;
color: #050505;
}
.af-contact__input::placeholder { color: #9ca3af; }
.af-contact__input:focus {
outline: none;
background: #fff;
border-color: #050505;
}
.af-contact__textarea {
height: auto;
min-height: 8rem;
padding: 0.75rem 0.875rem;
line-height: 1.6;
resize: vertical;
}
.af-contact__submit {
min-width: 12rem;
height: 2.75rem;
padding: 0 1.5rem;
background: #050505;
color: #fff;
border: 0;
border-radius: 0.5rem;
font-family: inherit;
font-size: 0.875rem;
font-weight: 400;
line-height: 1rem;
letter-spacing: 0.02em;
text-transform: uppercase;
cursor: pointer;
}
.af-contact__submit:hover { background: #505050; }
.af-contact__submit:disabled {
background: #9ca3af;
cursor: default;
}
@media (max-width: 575px) {
.af-contact__submit { width: 100%; }
}
/* Empty by default, so it must not reserve a line until it has something to say. */
.af-contact__status {
margin: 0 0 0.75rem;
font-size: 0.8125rem;
line-height: 1.5;
color: #6b7280;
}
.af-contact__status:empty { display: none; }
.af-contact__status.is-error { color: #bf4815; }
/* -- map ------------------------------------------------------------------- */
.af-contact__map {
margin-top: 0.5rem;
line-height: 0;
}
.af-contact__map iframe {
display: block;
width: 100%;
border: 0;
}
/* -- closing strip --------------------------------------------------------- */
.af-contact .faq-footer {
background: #f6f6f6;
padding: 1.75rem 0;
}
.af-contact .faq-footer__content {
align-items: center;
margin: 0;
}
.af-contact .faq-footer .static-text {
font-size: 1rem;
font-weight: 500;
color: #050505;
}
.af-contact .faq-footer__right-section {
display: flex;
flex-wrap: wrap;
gap: 2rem;
padding-top: 1rem;
}
@media (min-width: 992px) {
.af-contact .faq-footer__right-section {
justify-content: flex-end;
padding-top: 0;
}
}
.af-contact .faq-footer .email-us,
.af-contact .faq-footer .call-us {
display: block;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7280;
margin-bottom: 0.1875rem;
}
.af-contact .faq-footer__email a,
.af-contact .faq-footer__phone div {
font-size: 0.9375rem;
color: #050505;
text-decoration: none;
}
.af-contact .faq-footer__email a:hover {
color: #832729;
text-decoration: underline;
}
/* ==========================================================================
Hero carousel indicator — greyscale
--------------------------------------------------------------------------
twHeroCarousel.css draws the brand tabs' timing bars in Titan's gold
(#dda243 on a 20% gold track). Nothing else in the AudioFusion palette is
gold, so the four bars under BOSE / SENNHEISER / AUDAC / BENQ were the only
warm accent on an otherwise monochrome page. Same weights, neutral ink —
and it now matches the black pill the mobile dots already use.
========================================================================== */
.tw-hero-carousel .progress {
background: rgba(5, 5, 5, 0.12);
}
.tw-hero-carousel .progress-value {
background: #050505;
box-shadow: none;
}
/* The inactive tab labels sit at full ink, so the active one needs to carry
the weight instead of the colour. */
.tw-hero-carousel .progress-indicator li span {
color: #6b7280;
transition: color 0.2s ease;
}
.tw-hero-carousel .progress-indicator li.active span {
color: #050505;
font-weight: 500;
}
/* ==========================================================================
GET STARTED widget
--------------------------------------------------------------------------
The three benefit figures shipped with empty ![]()
, so only their
captions rendered. They now carry inline SVGs; these size them the way the
old rule sized the images, and give the strip a little more air.
========================================================================== */
.signup-widget-body .layer-three .icons figure .af-benefit-icon {
display: block;
width: 1.75rem;
height: 1.75rem;
margin: 0 auto 0.375rem;
color: #050505;
opacity: 0.8;
}
@media (min-width: 1024px) {
.signup-widget-body .layer-three .icons figure .af-benefit-icon {
width: 2rem;
height: 2rem;
}
}
/* The mobile sheet's decorative banner is gone; without it the body no longer
needs to reserve room on the right for artwork. */
.titan-signup-widget-text-sec.modal .signup-widget-body {
padding-right: 0;
}
/* ==========================================================================
Customer reviews — dark treatment
--------------------------------------------------------------------------
The section was white cards on white, sitting flush against a black footer,
which read as an unfinished seam. Inverting it makes the reviews the page's
closing statement and gives the footer something to butt against; the extra
bottom padding is the breathing room between the two.
========================================================================== */
/* The footer is #010101. Sitting the reviews on the same black would weld the
two into one slab, so this surface is lifted just enough to read as a
separate panel without introducing a hard rule. */
.af-rev {
background: #0d0d0d;
color: #fff;
margin-top: 3rem;
}
@media (min-width: 1024px) {
.af-rev { margin-top: 4rem; }
}
.af-rev__inner {
padding: 3rem 1rem 4rem;
}
@media (min-width: 1024px) {
.af-rev__inner { padding: 4rem 2.5rem 6rem; }
}
/* Breathing room on the footer's side of the seam, plus a hairline so the
tonal step is unmistakable on dim screens. */
.footer-div {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 4.5rem;
}
@media (min-width: 1024px) {
.footer-div { padding-top: 5.5rem; }
}
.af-rev__summary {
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
padding-bottom: 1.5rem;
margin-bottom: 2rem;
}
.af-rev__heading {
color: #fff;
opacity: 1;
letter-spacing: 0.06em;
}
.af-rev__place { color: rgba(255, 255, 255, 0.55); }
.af-rev__value { color: #fff; }
.af-rev__count { color: rgba(255, 255, 255, 0.55); }
/* -- the cards ------------------------------------------------------------- */
.af-rev__card {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 0;
padding: 1.5rem 1.375rem;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.af-rev__card:hover {
border-color: rgba(255, 255, 255, 0.32);
background: rgba(255, 255, 255, 0.03);
}
/* An outlined monogram rather than a filled gold disc — the only warm colour
left in the section is the rating itself. */
.af-rev__avatar {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.35);
color: #fff;
font-weight: 400;
letter-spacing: 0.02em;
}
.af-rev__name { color: #fff; }
.af-rev__text {
color: rgba(255, 255, 255, 0.72);
font-size: 0.8125rem;
line-height: 1.7;
margin-bottom: 1.125rem;
}
.af-rev__time {
color: rgba(255, 255, 255, 0.4);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Titan's white scrollbar-hiding rail on mobile needs the same inversion. */
.af-rev__row { padding-bottom: 0.25rem; }
/* ==========================================================================
Footer — showroom block
--------------------------------------------------------------------------
Replaces the app-store panel (AudioFusion has no app, and those links went
to Titan's listings). It reuses .footer-app-download's slot, so it only
needs type styles, not layout.
========================================================================== */
.af-footer-showroom .af-footer-address {
font-style: normal;
margin: 0.5rem 0 0.75rem;
font-size: 0.8125rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.66);
}
.af-footer-directions {
display: inline-block;
margin-bottom: 1.5rem;
font-size: 0.75rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
padding-bottom: 0.125rem;
}
.af-footer-directions:hover {
color: #fff;
border-bottom-color: #fff;
text-decoration: none;
}
/* ==========================================================================
Signed-in identity in the header
--------------------------------------------------------------------------
Titan drew the initial as a gold disc (#dda243) stacked on top of the
account glyph inside .custom-img, so the two fought for the same 1.625rem
box. It now sits beside the glyph on its own, in the palette's black.
One rule covers both breakpoints: .login-mobile and .login-menu are the
phone and desktop copies of the same lockup, and both live in .menu.account.
========================================================================== */
header .menu .custom-img.account-username {
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
width: -webkit-max-content;
width: max-content;
}
header .menu > a .user-name-logo {
flex: 0 0 auto;
width: 1.125rem;
height: 1.125rem;
margin: 0;
background: #050505;
color: #fff;
opacity: 1;
font-size: 0.5625rem;
font-weight: 500;
letter-spacing: 0;
text-transform: uppercase;
}
/* The glyph is height-constrained by header .custom-img .default-img; keep it
from stretching now that it shares a flex row. */
header .menu .custom-img.account-username .default-img {
width: auto;
flex: 0 0 auto;
}
/* ==========================================================================
Mobile menu — sign out
--------------------------------------------------------------------------
The drawer's signed-in header is a link to the account page, with no way to
end the session. af-bridge injects this button beneath it; styled to sit
with .logged-in-state rather than to compete with it.
========================================================================== */
/* The drawer's own button styles are broad enough to flatten this into plain
centred text, so the box is stated at a specificity they cannot reach. */
.mobile-nav-header-container button.af-mb-signout {
display: block;
width: calc(100% - 2rem);
margin: 0.875rem 1rem 0.75rem;
padding: 0.6875rem 1rem;
background: transparent;
/* The drawer strips borders off its buttons outright, so this one has to
be stated louder than the reset rather than merely more specifically. */
border: 1px solid rgba(0, 0, 0, 0.22) !important;
border-radius: 0.375rem;
font-family: var(--af-font-body);
font-size: 0.75rem;
font-weight: 500;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
color: #050505;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.mobile-nav-header-container button.af-mb-signout:hover,
.mobile-nav-header-container button.af-mb-signout:focus {
background: #050505;
border-color: #050505 !important;
color: #fff;
outline: none;
}
/* ==========================================================================
Mobile drawer — signed-in vs signed-out
--------------------------------------------------------------------------
Titan's drawer re-decides its own state on every open: it strips d-none off
.non-logged-in-state and restores it on .logged-in-state, so painting those
classes from auth state never held. On top of that,
.nav-bar-mobile .tw-mobile-nav.mobile-header .tw-mb-menu-header
{ display: block !important }
is four classes deep and beats Bootstrap's .d-none outright, so the
Login/Signup promo could not be hidden by class at all.
af-bridge puts .af-auth on instead, and these rules — deliberately
pitched above that selector — decide what the drawer shows. Class toggling
and CSS no longer disagree, because only one of them is in charge.
========================================================================== */
html.af-auth .nav-bar-mobile .tw-mobile-nav.mobile-header .tw-mb-menu-header,
html.af-auth .mobile-nav-header-container .mb-menu-header-unauth,
html.af-auth .mobile-nav-header-container .non-logged-in-state {
display: none !important;
}
html.af-auth .mobile-nav-header-container .logged-in-state {
display: block !important;
}
/* The signed-out drawer must never show a way to sign out — including in the
window between load and the first auth callback. */
html:not(.af-auth) .af-mb-signout {
display: none !important;
}
/* ==========================================================================
My Account
--------------------------------------------------------------------------
The page's markup was written against a vocabulary that only ever got half
implemented: .af-acct, .af-acct__gate, .af-acct__panel, .af-acct__grid,
.af-acct__providers, .af-acct__ghost, .af-acct__muted, .af-acct__order and
.af-acct__lines had no rules at all. Nothing threw and nothing was hidden —
the page simply drew as unstyled text on white, which is why it read as
blank. These are the missing halves.
========================================================================== */
.af-acct {
font-family: var(--af-font-body);
color: #050505;
background: #fff;
min-height: 60vh;
}
/* -- signed-out gate ------------------------------------------------------- */
.af-acct__gate {
max-width: 26rem;
margin: 2rem auto 4rem;
padding: 2.5rem 2rem;
text-align: center;
border: 1px solid #e5e7eb;
border-radius: 0.75rem;
background: #f9fafb;
}
.af-acct__gate .af-plp__title { margin-bottom: 0.5rem; }
.af-acct__gate p {
font-size: 0.875rem;
line-height: 1.6;
color: #6b7280;
margin: 0 0 1.5rem;
}
.af-acct__gate .af-acct__pay { margin: 0 auto; }
/* -- panels ---------------------------------------------------------------- */
/* The tabs already carry .is-active, toggled on click. Panels follow it, so
only one is on screen at a time — they used to stack, all three at once. */
.af-acct__panel { display: none; }
.af-acct__panel.is-active { display: block; }
.af-acct__panel h5 {
font-size: 0.9375rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #050505;
margin: 0 0 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #e5e7eb;
}
/* -- profile form ---------------------------------------------------------- */
.af-acct__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.125rem;
margin-bottom: 1.75rem;
}
@media (min-width: 768px) {
.af-acct__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.af-acct__grid label {
display: block;
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #6b7280;
}
.af-acct__grid input {
display: block;
width: 100%;
height: 2.75rem;
margin-top: 0.375rem;
padding: 0 0.875rem;
background: #f9fafb;
border: 1px solid rgba(0, 0, 0, 0.101961);
border-radius: 0.5rem;
font-family: inherit;
font-size: 0.8125rem;
color: #050505;
}
.af-acct__grid input:focus {
outline: none;
background: #fff;
border-color: #050505;
}
.af-acct__grid input:disabled {
color: #6b7280;
cursor: not-allowed;
}
/* -- sign-in methods ------------------------------------------------------- */
.af-acct__providers {
margin-top: 2.5rem;
padding-top: 1.75rem;
border-top: 1px solid #e5e7eb;
}
.af-acct__providers h5 {
font-size: 0.75rem;
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0.5rem;
}
.af-acct__muted {
font-size: 0.8125rem;
color: #6b7280;
margin: 0 0 1rem;
}
.af-acct__ghost {
height: 2.5rem;
margin: 0 0.5rem 0.75rem 0;
padding: 0 1.25rem;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.22);
border-radius: 0.5rem;
font-family: inherit;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #050505;
cursor: pointer;
}
.af-acct__ghost:hover {
background: #050505;
border-color: #050505;
color: #fff;
}
.af-acct__ghost[hidden] { display: none; }
/* Sign Out closes the panel rather than continuing it. */
.af-acct__panel > .af-acct__ghost {
margin-top: 2.5rem;
padding-top: 0;
}
/* -- cart and order lines -------------------------------------------------- */
.af-acct__lines { min-height: 3rem; }
.af-acct__order {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 1rem;
align-items: center;
}
.af-acct__order .af-acct__qty:last-child {
font-weight: 500;
color: #050505;
}
/* ==========================================================================
Stock indicators — don't claim what isn't known yet
--------------------------------------------------------------------------
The static markup hard-codes "Out Of Stock" on every card and product page;
firebase-catalog-sync.js overwrites it once Firestore answers. Between paint
and that answer the page was telling every visitor the whole catalog was
unavailable, then silently correcting itself a second later.
These stay out of the way until .af-catalog-ready lands on — set on
success, on failure, and on the session-cached path, so this can never latch
the indicators off permanently. visibility rather than display, so the card
does not reflow when the answer arrives.
========================================================================== */
.out-of-stock,
.status-stock {
visibility: hidden;
}
html.af-catalog-ready .out-of-stock,
html.af-catalog-ready .status-stock {
visibility: visible;
}
/* ==========================================================================
Static prose pages — About, Terms, Privacy
--------------------------------------------------------------------------
Same shell as Contact Us, one readable column. Titan's own .static-pages
rules never made it into this mirror, so as with .af-contact everything the
layout needs is drawn here, scoped under .af-doc.
========================================================================== */
.af-doc {
font-family: var(--af-font-body);
color: #050505;
}
.af-doc .product-breadcrumb .breadcrumb-item,
.af-doc .product-breadcrumb .breadcrumb-item a {
font-size: 0.75rem;
color: #6b7280;
text-decoration: none;
}
.af-doc .product-breadcrumb .breadcrumb-item:last-child a { color: #050505; }
/* Title block shares the body's measure, so the heading lines up with the
prose beneath it rather than starting at the page gutter. */
.af-doc__head {
max-width: 52rem;
margin: 0 auto 2.5rem;
padding-top: 0.5rem;
padding-bottom: 1.75rem;
border-bottom: 1px solid #e5e7eb;
}
.af-doc__title {
font-size: 1.5rem;
font-weight: 500;
letter-spacing: 0.01em;
margin: 0 0 0.625rem;
}
@media (min-width: 1024px) { .af-doc__title { font-size: 1.75rem; } }
.af-doc__lede {
max-width: 46rem;
margin: 0;
font-size: 0.9375rem;
line-height: 1.7;
color: #6b7280;
}
/* -- the column ------------------------------------------------------------ */
.af-doc__body {
max-width: 52rem;
margin-left: auto;
margin-right: auto;
padding-bottom: 4rem;
}
.af-doc__h {
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #050505;
margin: 2.75rem 0 1rem;
padding-bottom: 0.625rem;
border-bottom: 1px solid #e5e7eb;
}
.af-doc__body > .af-doc__h:first-child { margin-top: 0; }
.af-doc__sh {
font-size: 0.9375rem;
font-weight: 500;
color: #050505;
margin: 1.75rem 0 0.5rem;
}
.af-doc__body p {
font-size: 0.9375rem;
line-height: 1.8;
color: #374151;
margin: 0 0 1.125rem;
}
.af-doc__body a {
color: #050505;
text-decoration: underline;
text-underline-offset: 0.15em;
}
.af-doc__body a:hover { color: #832729; }
.af-doc__list {
margin: 0 0 1.5rem;
padding-left: 1.125rem;
list-style: none;
}
.af-doc__list li {
position: relative;
font-size: 0.9375rem;
line-height: 1.8;
color: #374151;
margin-bottom: 0.875rem;
}
.af-doc__list li::before {
content: "";
position: absolute;
left: -1.125rem;
top: 0.75em;
width: 0.3125rem;
height: 0.3125rem;
border-radius: 50%;
background: #050505;
}
.af-doc__list strong { color: #050505; font-weight: 500; }
.af-doc__contact {
padding: 1.25rem 1.5rem;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
line-height: 1.9 !important;
}
/* Shared closing strip, same as Contact Us. */
.af-doc .faq-footer,
.af-faq .faq-footer {
background: #f6f6f6;
padding: 1.75rem 0;
}
.af-doc .faq-footer__content,
.af-faq .faq-footer__content { align-items: center; margin: 0; }
.af-doc .faq-footer .static-text,
.af-faq .faq-footer .static-text {
font-size: 1rem;
font-weight: 500;
color: #050505;
}
.af-doc .faq-footer__right-section,
.af-faq .faq-footer__right-section {
display: flex;
flex-wrap: wrap;
gap: 2rem;
padding-top: 1rem;
}
@media (min-width: 992px) {
.af-doc .faq-footer__right-section,
.af-faq .faq-footer__right-section { justify-content: flex-end; padding-top: 0; }
}
.af-doc .faq-footer .email-us, .af-faq .faq-footer .email-us,
.af-doc .faq-footer .call-us, .af-faq .faq-footer .call-us {
display: block;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7280;
margin-bottom: 0.1875rem;
}
.af-doc .faq-footer__email a, .af-faq .faq-footer__email a,
.af-doc .faq-footer__phone div, .af-faq .faq-footer__phone div {
font-size: 0.9375rem;
color: #050505;
text-decoration: none;
}
/* ==========================================================================
FAQ
--------------------------------------------------------------------------
Titan's help-page shape: a category rail on the left, accordions on the
right. Bootstrap's collapse plugin drives the cards; the rail's active state
is handled by the page's own script.
========================================================================== */
.af-faq { font-family: var(--af-font-body); color: #050505; }
.af-faq .product-breadcrumb .breadcrumb-item,
.af-faq .product-breadcrumb .breadcrumb-item a {
font-size: 0.75rem;
color: #6b7280;
text-decoration: none;
}
.af-faq .product-breadcrumb .breadcrumb-item:last-child a { color: #050505; }
.af-faq .faq-page-container {
max-width: 90rem;
margin: 0 auto;
padding: 0 1rem 3.5rem;
}
@media (min-width: 1024px) {
.af-faq .faq-page-container { padding: 0 2.5rem 4.5rem; }
}
.af-faq .overview-info h3 {
font-size: 0.8125rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #050505;
margin: 0 0 1.125rem;
padding-bottom: 0.625rem;
border-bottom: 1px solid #e5e7eb;
}
/* -- the category rail ----------------------------------------------------- */
.af-faq .dashboard-menu { border: 0; }
@media (min-width: 992px) {
/* Follows the reader down a long page. */
.af-faq .col-lg-3 {
position: sticky;
top: 1.5rem;
align-self: flex-start;
}
.af-faq .row { align-items: flex-start; }
}
.af-faq .c-menu-list {
display: block;
padding: 0.625rem 0;
background: transparent;
font-size: 0.8125rem;
color: #6b7280;
text-decoration: none;
border-left: 2px solid transparent;
}
@media (min-width: 992px) {
.af-faq .c-menu-list { padding-left: 0.875rem; }
}
.af-faq .c-menu-list:hover { color: #050505; }
.af-faq .c-menu-list.active {
color: #050505;
font-weight: 500;
background: transparent;
border-left-color: #050505;
}
/* -- the accordions -------------------------------------------------------- */
.af-faq .dashboard-body { padding: 0; }
@media (min-width: 992px) {
.af-faq .dashboard-body { padding-left: 3rem; }
}
.af-faq__group { margin-bottom: 3rem; scroll-margin-top: 1.5rem; }
.af-faq__group:last-child { margin-bottom: 0; }
.af-faq .accordion .card {
border: 0;
border-bottom: 1px solid #e5e7eb;
border-radius: 0;
background: transparent;
}
.af-faq .accordion .card-header {
padding: 0;
background: transparent;
border: 0;
}
.af-faq .accordion .card-header .btn {
position: relative;
display: block;
width: 100%;
padding: 1.125rem 2.5rem 1.125rem 0;
background: none;
border: 0;
border-radius: 0;
font-family: inherit;
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.5;
color: #050505;
text-align: left;
white-space: normal;
cursor: pointer;
}
.af-faq .accordion .card-header .btn:focus { box-shadow: none; outline: none; }
.af-faq .accordion .card-header .btn:hover { color: #832729; }
/* Chevron, rotated by Bootstrap's own .collapsed toggle. */
.af-faq .accordion .card-header .btn::after {
content: "";
position: absolute;
top: 1.5rem;
right: 0.375rem;
width: 0.5rem;
height: 0.5rem;
border-right: 1.5px solid #6b7280;
border-bottom: 1.5px solid #6b7280;
transform: rotate(-135deg);
transition: transform 0.2s ease;
}
.af-faq .accordion .card-header .btn.collapsed::after {
transform: rotate(45deg);
top: 1.25rem;
}
.af-faq .accordion .card-body {
padding: 0 2.5rem 1.375rem 0;
}
.af-faq .accordion .card-body p {
font-size: 0.875rem;
line-height: 1.8;
color: #374151;
margin: 0 0 0.75rem;
}
.af-faq .accordion .card-body p:last-child { margin-bottom: 0; }
.af-faq .accordion .card-body a {
color: #050505;
text-decoration: underline;
text-underline-offset: 0.15em;
}
.af-faq .accordion .card-body a:hover { color: #832729; }
.af-faq .accordion .card-body strong { color: #050505; font-weight: 500; }
/* ==========================================================================
Home page — laptop sizing pass
--------------------------------------------------------------------------
Loaded after the earlier home-page rules, so these win where they overlap.
Laptop widths only (>=1024px); phone and tablet layouts are unchanged.
========================================================================== */
@media (min-width: 1024px) {
/* Brand roundels: bigger marks, pulled closer together. The row's own
max-width has to come in with the gap, otherwise the grid just spreads
the columns back out to fill the same 56rem. */
.af-brand-strip__row {
gap: 1.75rem;
max-width: 46rem;
}
.af-brand-strip__item { max-width: 10.5rem; }
/* Category cards: a step up, with the row widened to match so the tiles
grow rather than the gutters shrinking. */
.af-cat-strip__row { max-width: 78rem; }
/* Half the previous gap between the benefits panel and the Made in India
banner below it. */
.signup-benefits-container { margin-bottom: 0.875rem; }
}
@media (min-width: 1280px) {
.af-brand-strip__row { gap: 2rem; max-width: 50rem; }
.af-brand-strip__item { max-width: 11.5rem; }
.af-cat-strip__row { max-width: 84rem; }
}
/* ==========================================================================
Toasts
--------------------------------------------------------------------------
notify() used to look for UIkit — the old AudioFusion site's UI library,
which this storefront never loads — and fall through to alert(). Every
sign-in, sign-out and validation message therefore arrived as a browser
dialog that blocks the page and cannot be styled. These are the styles for
the replacement it renders itself.
========================================================================== */
#af-toasts {
position: fixed;
left: 50%;
bottom: 1.5rem;
z-index: 2000; /* over the login modal, which sits at 1050 */
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
width: calc(100% - 2rem);
max-width: 26rem;
pointer-events: none;
}
.af-toast {
pointer-events: auto;
position: relative;
width: 100%;
padding: 0.875rem 2.5rem 0.875rem 1rem;
background: #050505;
color: #fff;
border-radius: 0.5rem;
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.24);
font-family: var(--af-font-body);
font-size: 0.8125rem;
line-height: 1.5;
animation: af-toast-in 0.22s ease both;
}
.af-toast.is-going {
animation: af-toast-out 0.2s ease both;
}
.af-toast__x {
position: absolute;
top: 50%;
right: 0.5rem;
transform: translateY(-50%);
width: 1.75rem;
height: 1.75rem;
padding: 0;
background: none;
border: 0;
color: inherit;
opacity: 0.7;
font-size: 1.125rem;
line-height: 1;
cursor: pointer;
}
.af-toast__x:hover { opacity: 1; }
@keyframes af-toast-in {
from { opacity: 0; transform: translateY(0.5rem); }
to { opacity: 1; transform: none; }
}
@keyframes af-toast-out {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(0.375rem); }
}
@media (prefers-reduced-motion: reduce) {
.af-toast, .af-toast.is-going { animation: none; }
}
/* ==========================================================================
Wishlist
--------------------------------------------------------------------------
The heart on every tile and product page had no state to show, because
nothing was storing one. af-wishlist.js sets .is-wished; these are the two
states it toggles between, plus the header's count.
========================================================================== */
.wish.is-wished svg path,
.wishlistadd.is-wished svg path {
fill: #050505;
stroke: #050505;
}
.af-ptile__wish,
.af-pdp__wish {
transition: transform 0.15s ease, color 0.15s ease;
}
.af-ptile__wish:hover,
.af-pdp__wish:hover { transform: scale(1.12); }
.af-ptile__wish.is-wished,
.af-pdp__wish.is-wished { color: #050505; }
/* The header badge is styled further down, under "Wishlist badge", at a
specificity that beats Titan's 5px dot. */
/* Wishlist rows reuse the cart's line, but the name is a link and there is no
quantity stepper. */
.af-acct__line a.af-acct__name {
color: #050505;
text-decoration: none;
}
.af-acct__line a.af-acct__name:hover { text-decoration: underline; }
/* ==========================================================================
Checkout
--------------------------------------------------------------------------
The panel was six bare placeholder inputs and a summary stacked above them,
inside an unstyled Bootstrap modal whose close button was written in
Bootstrap 5 syntax and so neither rendered nor worked. Two columns now: the
form on the left, the order and the Pay button pinned beside it on desktop
so the total stays visible while the address is typed.
========================================================================== */
/* The dialog is centred, and Bootstrap 4 centres it with
`align-items:center` on a flex container of `min-height:calc(100% - 1rem)`.
That is fine while the panel is shorter than the screen and actively harmful
once it is not: the overflow is split evenly above and below, so on a 740px
phone this 1105px panel sat at top:-365px — the Checkout title, the close
button and the Full name field were all off the top of the screen, and there
was no way to reach them, because the modal element had grown to the panel's
height (scrollHeight === clientHeight, nothing to scroll) while was
locked at overflow:hidden by .modal-open.
Two things fix it, and both are needed:
1. pin the modal to the viewport so it is a scroll container again, and
2. stop centring a panel that is taller than the screen.
------------------------------------------------------------------------- */
/* (1) Pin to the viewport. Bootstrap does set inset:0 on .modal, but the panel
grew the element anyway here; stating the height explicitly makes it a real
scroll container whatever else is in the cascade. */
.af-co.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
}
/* (2) Centre only when the panel actually fits. Above this width it always
does, and the centred dialog is the nicer treatment. */
.af-co .modal-dialog { max-width: 52rem; }
@media (max-width: 767.98px) {
/* A full-bleed sheet on a phone: starts at the top, so the title and the
close button are the first things on screen and every field below is
reachable by scrolling the modal. */
.af-co .modal-dialog.modal-dialog-centered {
align-items: flex-start;
min-height: 100%;
margin: 0;
max-width: none;
}
/* Written as .af-co , two classes deep, on purpose: this block sits
above the base .af-co__* rules in the file, so a single-class selector
here loses to them on any property they both set. */
.af-co .af-co__content {
border-radius: 0;
min-height: 100vh;
/* The desktop panel clips its own rounded corners with overflow:hidden.
An overflow:hidden ancestor also silently disables position:sticky on
anything inside it, which is why the header below would not stick.
The sheet has square corners, so there is nothing to clip here. */
overflow: visible;
}
/* Keep the title and the close button in reach while the form scrolls
under them — on a long form the way out should never be a scroll away. */
.af-co .af-co__head {
position: sticky;
top: 0;
z-index: 2;
background: #fff;
}
.af-co .af-co__body { padding: 1.25rem 1rem 1.5rem; }
}
.af-co__content {
border: 0;
border-radius: 0.75rem;
overflow: hidden;
font-family: var(--af-font-body);
}
.af-co__head {
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid #e5e7eb;
}
.af-co__title {
font-size: 0.9375rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #050505;
margin: 0;
}
.af-co__x {
width: 2rem;
height: 2rem;
padding: 0;
margin: 0;
background: none;
border: 0;
opacity: 1;
color: #6b7280;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.af-co__x:hover { color: #050505; }
.af-co__body { padding: 1.5rem; }
.af-co__cols {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.af-co__cols { grid-template-columns: 1.25fr 1fr; gap: 2.5rem; }
}
.af-co__legend {
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #6b7280;
margin: 0 0 1rem;
padding-bottom: 0.625rem;
border-bottom: 1px solid #e5e7eb;
}
/* -- form ------------------------------------------------------------------ */
.af-co__label {
display: block;
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #374151;
margin: 0 0 0.3125rem;
}
.af-co__input {
width: 100%;
height: 2.75rem;
padding: 0 0.875rem;
margin-bottom: 0.875rem;
background: #f9fafb;
border: 1px solid rgba(0, 0, 0, 0.101961);
border-radius: 0.5rem;
font-family: inherit;
font-size: 0.8125rem;
color: #050505;
}
.af-co__input::placeholder { color: #9ca3af; }
.af-co__input:focus {
outline: none;
background: #fff;
border-color: #050505;
}
.af-co__textarea {
height: auto;
min-height: 4.5rem;
padding: 0.75rem 0.875rem;
line-height: 1.6;
resize: vertical;
}
.af-co__input--short { max-width: 10rem; }
.af-co__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.875rem;
}
.af-co__status {
margin: 0.25rem 0 0;
font-size: 0.8125rem;
line-height: 1.5;
color: #6b7280;
}
.af-co__status:empty { display: none; }
.af-co__status.is-error { color: #bf4815; }
/* -- summary --------------------------------------------------------------- */
.af-co__summary {
align-self: start;
padding: 1.25rem;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
}
@media (min-width: 768px) {
.af-co__summary { position: sticky; top: 0; }
}
.af-co__line {
display: grid;
grid-template-columns: 2.75rem 1fr auto;
gap: 0.75rem;
align-items: center;
padding-bottom: 0.875rem;
margin-bottom: 0.875rem;
border-bottom: 1px solid #e5e7eb;
}
.af-co__thumb {
width: 2.75rem;
height: 2.75rem;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 0.375rem;
overflow: hidden;
}
.af-co__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.af-co__name {
font-size: 0.8125rem;
line-height: 1.4;
color: #050505;
}
.af-co__qty {
display: block;
font-size: 0.6875rem;
color: #6b7280;
margin-top: 0.125rem;
}
.af-co__amt {
font-size: 0.8125rem;
color: #050505;
white-space: nowrap;
}
.af-co__total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 0.25rem;
font-size: 0.875rem;
font-weight: 500;
color: #050505;
}
.af-co__total span:last-child { font-size: 1.125rem; }
.af-co__pay {
width: 100%;
height: 3rem;
margin-top: 1.25rem;
background: #050505;
color: #fff;
border: 0;
border-radius: 0.5rem;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
}
.af-co__pay:hover { background: #505050; }
.af-co__pay:disabled { background: #9ca3af; cursor: default; }
.af-co__secure {
display: flex;
align-items: center;
gap: 0.375rem;
margin: 0.875rem 0 0;
font-size: 0.6875rem;
line-height: 1.4;
color: #6b7280;
}
/* ==========================================================================
Progressive rendering (LCP)
--------------------------------------------------------------------------
Titan's twCategoryCarousel.css ships `.tw-category-carousel{opacity:0}` and
reveals it only after slick initialises inside the deferred 783KB bundle -
on a throttled phone that is seconds of blank space at the top of the page.
The markup underneath is a perfectly serviceable scroll row, so paint it
immediately; slick upgrading it later is invisible to the user.
========================================================================== */
.tw-category-carousel { opacity: 1; }
/* The hero's first slide is Bootstrap-visible (carousel-item.active) before
JS runs; give the frame a stable aspect ratio so the image area doesn't
collapse-then-grow while CSS/JS streams in (keeps CLS at ~0). */
.tw-hero-carousel .carousel-item.active img { width: 100%; height: auto; }
/* WhatsApp enquiry on the product page - monochrome, matches the PDP buttons */
.af-pdp__wa {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 10px;
padding: 13px 18px;
border: 1px solid #1a1a1a;
color: #1a1a1a;
font-size: 13px;
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none;
min-height: 44px;
}
.af-pdp__wa:hover,
.af-pdp__wa:focus-visible {
background: #1a1a1a;
color: #fff;
text-decoration: none;
}
/* Wishlist hearts are real