/** Shopify CDN: Minification failed Line 792:0 Unexpected "<" **/ /* ============================================================ Tamarua Beauty Academy — homepage redesign All selectors are namespaced with `tba-` so nothing collides with the Turbo theme's own CSS. Do not rename the prefix. ============================================================ */ /* ============================================================ TOKENS — white-dominant canvas, black for gravity, gold for jewellery ============================================================ */ :root{ --tba-gold:#dca277; --tba-gold-dp:#b87f52; --tba-gold-lt:#ecccb1; --tba-gold-sheen:linear-gradient(105deg,#e8bd9a 0%,#dca277 42%,#b87f52 100%); --tba-black:#111111; --tba-ink:#333333; --tba-ink-soft:#4f4f4f; --tba-ink-mute:#6f6f6f; --tba-white:#ffffff; --tba-paper:#faf7f4; /* warm off-white */ --tba-mist:#f3efeb; /* deeper neutral */ --tba-blush:#fdf8f3; /* warm panel tint */ --tba-blush-dp:#f8efe6; --tba-line:rgba(17,17,17,.11); --tba-line-soft:rgba(17,17,17,.07); --tba-line-gold:rgba(220,162,119,.42); --tba-serif:"Playfair Display",Georgia,"Times New Roman",serif; --tba-sans:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif; --tba-shell:1440px; --tba-gutter:clamp(20px,4vw,60px); --tba-radius:0; /* squared corners read more couture */ --tba-ease:cubic-bezier(.22,.61,.36,1); --tba-slow:.55s var(--tba-ease); } @media (min-width:1700px){ :root{ --tba-shell:1880px; } } /* ---------- scoped reset ---------- `.tba-scope` wraps every section this pack renders, so none of these base rules leak into the rest of the theme. They are written with :where() so they keep the *same specificity* a bare element selector would have — otherwise `.tba-scope p` (0,1,1) would outrank component rules like `.tba-eyebrow` (0,1,0) and quietly change the design. `body.tba-theme` is added to in layout/theme.liquid — see shopify/README.md. */ :where(.tba-scope) *,:where(.tba-scope) *::before,:where(.tba-scope) *::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body:where(.tba-theme){ margin:0; font-family:var(--tba-sans); font-weight:400; font-size:16px; line-height:1.8; color:var(--tba-ink-soft); background:var(--tba-white); overflow-x:hidden; -webkit-font-smoothing:antialiased; } :where(.tba-scope) img{max-width:100%;display:block;height:auto} :where(.tba-scope) a{color:inherit;text-decoration:none} :where(.tba-scope) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :where(.tba-scope) h1,:where(.tba-scope) h2,:where(.tba-scope) h3, :where(.tba-scope) h4,:where(.tba-scope) h5{ margin:0;font-weight:400;line-height:1.12;color:var(--tba-black)} :where(.tba-scope) p{margin:0 0 1.1em} :where(.tba-scope) p:last-child{margin-bottom:0} :where(.tba-scope) ::selection{background:var(--tba-gold);color:#fff} :where(.tba-scope) :focus-visible{outline:1px solid var(--tba-gold-dp);outline-offset:3px} /* The theme wraps {{ content_for_layout }} in .section-wrapper. Where that wrapper carries a max-width or padding it would box in these full-bleed bands, so neutralise it — but only on pages actually built from this pack. */ body.tba-theme .section-wrapper:has(.tba-scope){max-width:none;width:auto;margin:0;padding:0} /* ---------- shell / sections ---------- */ .tba-shell{width:100%;max-width:var(--tba-shell);margin-inline:auto;padding-inline:var(--tba-gutter)} .tba-shell--narrow{max-width:min(var(--tba-shell),1080px)} .tba-section{padding-block:clamp(64px,8vw,124px)} .tba-section--tight{padding-block:clamp(44px,5.5vw,78px)} .tba-section--cream{background:var(--tba-paper)} .tba-section--sand{background:var(--tba-mist)} .tba-section--blush{background:var(--tba-blush-dp)} /* ---------- type ---------- */ .tba-eyebrow{ font-size:12px;letter-spacing:.26em;text-transform:uppercase; font-weight:600;color:var(--tba-gold-dp);margin:0 0 20px } .tba-h-xl{font-family:var(--tba-serif);font-size:clamp(38px,5.2vw,70px);font-weight:400;line-height:1.06;letter-spacing:.012em;text-transform:uppercase} .tba-h-lg, #insta-feed h2{font-family:var(--tba-serif);font-size:clamp(27px,3vw,44px);font-weight:400;line-height:1.18;letter-spacing:.015em;text-transform:uppercase} .tba-h-md{font-family:var(--tba-serif);font-size:clamp(22px,2vw,31px);font-weight:500;line-height:1.24;letter-spacing:.02em;text-transform:uppercase} .tba-lede{font-size:clamp(15.5px,1.1vw,17.5px);color:var(--tba-ink-soft);line-height:1.9} .tba-center{text-align:center} /* hairline divider with a gold lozenge */ .tba-rule{ position:relative;width:78px;height:1px;border:0;overflow:visible;margin:26px 0; background:linear-gradient(90deg,transparent,var(--tba-gold),transparent) } .tba-rule::after{ content:"";position:absolute;left:50%;top:50%;width:5px;height:5px; transform:translate(-50%,-50%) rotate(45deg);background:var(--tba-gold) } .tba-center .tba-rule,.tba-rule--center{margin-inline:auto} /* ---------- buttons ---------- */ .tba-btn{ --tba-btn-bg:var(--tba-black); --tba-btn-fg:#fff; --tba-btn-bd:var(--tba-black); --tba-btn-bg-h:var(--tba-gold); --tba-btn-fg-h:#241a12; --tba-btn-bd-h:var(--tba-gold); position:relative;overflow:hidden; display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:66px;padding:0 46px; background:var(--tba-btn-bg);color:var(--tba-btn-fg);border:1px solid var(--tba-btn-bd); font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; border-radius:var(--tba-radius);white-space:nowrap;text-align:center; box-shadow:0 6px 20px rgba(17,17,17,.1); transition:background var(--tba-slow),color var(--tba-slow),border-color var(--tba-slow), transform var(--tba-slow),box-shadow var(--tba-slow) } .tba-btn>*{position:relative;z-index:1} .tba-btn:hover{ background:var(--tba-btn-bg-h);color:var(--tba-btn-fg-h);border-color:var(--tba-btn-bd-h); transform:translateY(-3px);box-shadow:0 16px 36px rgba(17,17,17,.22) } .tba-btn--gold{--tba-btn-bg:var(--tba-gold);--tba-btn-bd:var(--tba-gold);--tba-btn-fg:#241a12; --tba-btn-bg-h:var(--tba-black);--tba-btn-fg-h:var(--tba-gold);--tba-btn-bd-h:var(--tba-black); box-shadow:0 8px 24px rgba(220,162,119,.38)} .tba-btn--gold:hover{box-shadow:0 18px 40px rgba(220,162,119,.5)} .tba-btn--ghost{--tba-btn-bg:transparent;--tba-btn-fg:var(--tba-black);--tba-btn-bd:rgba(17,17,17,.28); --tba-btn-bg-h:var(--tba-black);--tba-btn-fg-h:#fff;--tba-btn-bd-h:var(--tba-black)} .tba-btn--light{box-shadow:none;--tba-btn-bg:#fff;--tba-btn-fg:var(--tba-black);--tba-btn-bd:#fff;--tba-btn-bg-h:transparent;--tba-btn-fg-h:#fff;--tba-btn-bd-h:#fff} .tba-btn--bronze{box-shadow:0 8px 24px rgba(156,98,52,.34);--tba-btn-bg:linear-gradient(100deg,#b87f52 0%,#9c6234 100%);--tba-btn-bd:#9c6234;--tba-btn-fg:#fff; --tba-btn-bg-h:var(--tba-black);--tba-btn-fg-h:var(--tba-gold);--tba-btn-bd-h:var(--tba-black)} .tba-btn--sm{min-height:50px;padding:0 26px;font-size:12.5px;font-weight:600;letter-spacing:.07em; --tba-btn-bg-h:#fff;--tba-btn-fg-h:var(--tba-black);--tba-btn-bd-h:#fff} .tba-btn-row{display:flex;flex-wrap:wrap;gap:14px} .tba-center .tba-btn-row{justify-content:center} .tba-link-arrow{ display:inline-flex;align-items:center;gap:11px; font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--tba-black);padding-bottom:8px; background:linear-gradient(var(--tba-gold),var(--tba-gold)) left bottom/100% 1px no-repeat; transition:color var(--tba-slow),background-size var(--tba-slow) } .tba-link-arrow svg{transition:transform var(--tba-slow)} .tba-link-arrow:hover{color:var(--tba-gold-dp)} .tba-link-arrow:hover svg{transform:translateX(6px)} /* ============================================================ ANNOUNCEMENT ============================================================ */ .tba-announce{ background:var(--tba-gold);color:#241a12;position:relative;z-index:60; border-bottom:1px solid rgba(36,26,18,.16) } .tba-announce .tba-shell{ display:grid;grid-template-columns:auto 1fr auto;align-items:center; gap:clamp(14px,3vw,34px);min-height:50px } .tba-announce__text{ margin:0;text-align:center; font-size:15px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;line-height:1.45 } .tba-announce__text strong{font-weight:500;color:#241a12} .tba-announce__social{justify-self:start} .tba-announce .tba-socials{gap:10px} .tba-socials li {margin-bottom:0px;} .tba-announce .tba-socials a{ width:30px;height:30px;border-radius:50%; background:var(--tba-black);color:var(--tba-gold-lt); transition:background .3s var(--tba-ease),color .3s var(--tba-ease),transform .3s var(--tba-ease) } .tba-announce .tba-socials a:hover{background:#fff;color:var(--tba-black);transform:translateY(-2px)} .tba-announce__links{ justify-self:end;display:flex;align-items:center;gap:clamp(14px,1.6vw,24px); font-size:13.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap } .tba-announce__links a{ display:inline-flex;align-items:center;gap:8px;color:#241a12; text-underline-offset:5px;transition:color .3s } .tba-announce__links a:hover{color:#000;text-decoration:underline} .tba-announce__links svg{color:#241a12;flex:none;transition:color .3s} .tba-announce__links a:hover svg{color:#000} /* ============================================================ HEADER ============================================================ */ .tba-header{position:sticky;top:0;z-index:50;background:var(--tba-black);border-bottom:1px solid rgba(220,162,119,.26);transition:box-shadow .35s} .tba-header.tba-is-stuck{box-shadow:0 6px 34px rgba(12,10,9,.34)} .tba-socials{display:flex;align-items:center;gap:15px;list-style:none;margin:0;padding:0} .tba-socials a{display:grid;place-items:center;width:26px;height:26px;color:var(--tba-ink-mute);transition:color .3s} .tba-socials a:hover{color:var(--tba-gold-dp)} .tba-navbar .tba-shell{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;min-height:112px} .tba-brand{justify-self:center;display:block;text-align:center;padding-inline:14px} .tba-brand img{width:clamp(160px,14vw,206px);margin-inline:auto} .tba-brand__fallback{display:none;font-family:var(--tba-serif);line-height:1} .tba-brand__fallback b{display:block;font-size:30px;font-weight:400;letter-spacing:.16em;color:var(--tba-gold-dp)} .tba-brand__fallback span{display:block;font-family:var(--tba-sans);font-size:10.5px;font-weight:600;letter-spacing:.28em;color:var(--tba-ink-mute);margin-top:7px} .tba-brand.tba-is-fallback img{display:none} .tba-brand.tba-is-fallback .tba-brand__fallback{display:block} .tba-header .tba-brand__fallback span{color:rgba(255,255,255,.6)} .tba-nav{display:flex;align-items:center;align-self:stretch;gap:clamp(16px,2.1vw,36px)} .tba-nav--right{justify-self:end} .tba-nav__link,.tba-nav__link:visited{ position:relative;display:inline-flex;align-items:center;gap:8px; font-size:13.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase; padding:12px 0;color:#fff;white-space:nowrap;transition:color var(--tba-slow) } .tba-nav__link::after{ content:"";position:absolute;left:0;right:100%;bottom:6px;height:1px;background:var(--tba-gold); transition:right var(--tba-slow) } .tba-nav__link:hover{color:var(--tba-gold)} .tba-nav__link:hover::after,.tba-nav__item:hover>.tba-nav__link::after{right:0} .tba-nav__item{position:static;display:flex;align-items:center;align-self:stretch} .tba-nav__item .tba-chev{transition:transform var(--tba-slow)} .tba-nav__item:hover .tba-chev{transform:rotate(180deg)} .tba-tools{display:flex;align-items:center;gap:4px} .tba-icon-btn,.tba-icon-btn:visited{ width:44px;height:44px;display:grid;place-items:center;border-radius:50%; color:#fff;transition:.3s var(--tba-ease);position:relative } .tba-icon-btn:hover{background:rgba(255,255,255,.1);color:var(--tba-gold)} .tba-cart-count{ position:absolute;top:3px;right:1px;min-width:19px;height:19px;padding:0 5px; background:var(--tba-gold);color:#241a12;border-radius:20px; font-size:11px;font-weight:700;line-height:19px;text-align:center;letter-spacing:0 } /* mega menu */ .tba-mega{ position:absolute;top:100%;left:0;right:0;transform:translateY(6px); background:#fff;border:1px solid var(--tba-line-soft);border-top:1px solid var(--tba-line-gold); box-shadow:0 30px 70px rgba(17,17,17,.11); padding:44px 46px;opacity:0;visibility:hidden;transition:.35s var(--tba-ease);z-index:40 } .tba-nav__item:hover .tba-mega{opacity:1;visibility:visible;transform:none} .tba-mega__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px} .tba-mega__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(208px,1fr));gap:30px 26px} .tba-mega__list h4 a{color:inherit;transition:color .3s} .tba-mega__list h4 a:hover{color:var(--tba-gold-dp)} .tba-mega__cols .tba-mega__list ul a{font-size:12.5px;line-height:1.5;letter-spacing:.02em} .tba-mega__card figure{margin:0 0 16px;overflow:hidden;background:var(--tba-mist)} .tba-mega__card img{aspect-ratio:1;object-fit:cover;transition:transform 1s var(--tba-ease)} .tba-mega__card:hover img{transform:scale(1.07)} .tba-mega__card h4{font-family:var(--tba-sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:color .3s} .tba-mega__card:hover h4{color:var(--tba-gold-dp)} .tba-mega__list h4{ font-family:var(--tba-sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; padding-bottom:14px;border-bottom:1px solid var(--tba-line-gold);margin-bottom:16px } .tba-mega__list ul{list-style:none;margin:0;padding:0;display:grid;gap:12px} .tba-mega__list a{font-size:15px;color:var(--tba-ink-soft);transition:.3s var(--tba-ease)} .tba-mega__list a:hover{color:var(--tba-gold-dp);padding-left:6px} /* ---------- mobile bar ---------- */ .tba-mobilebar{display:none} .tba-mobilebar .tba-shell{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;min-height:76px} .tba-mobilebar .tba-brand{justify-self:start;text-align:left;padding-inline:0} .tba-mobilebar .tba-brand img{margin-inline:0} .tba-mobilebar .tba-brand__fallback{text-align:left} .tba-mobilebar__right{display:flex;align-items:center;gap:14px} .tba-call-pill{ width:42px;height:42px;flex:0 0 42px;border-radius:50%; background:var(--tba-gold);border:1px solid var(--tba-gold);color:#241a12; display:grid;place-items:center;transition:.35s var(--tba-ease) } .tba-call-pill:hover,.tba-call-pill:focus-visible{background:#fff;border-color:#fff;color:var(--tba-black)} .tba-burger{ width:42px;height:42px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:6px } .tba-burger span{display:block;width:25px;height:2px;border-radius:2px;background:#fff;transition:.35s var(--tba-ease)} .tba-burger.tba-is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)} .tba-burger.tba-is-open span:nth-child(2){opacity:0} .tba-burger.tba-is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* ---------- drawer ---------- */ .tba-scrim{position:fixed;inset:0;background:rgba(17,14,12,.55);opacity:0;visibility:hidden;transition:.4s;z-index:70} .tba-scrim.tba-is-open{opacity:1;visibility:visible} .tba-drawer{ position:fixed;top:0;left:0;bottom:0;width:min(400px,88vw);background:#fff;z-index:80; transform:translateX(-100%);transition:transform .45s var(--tba-ease); display:flex;flex-direction:column;overflow-y:auto } .tba-drawer.tba-is-open{transform:none} .tba-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--tba-line-soft)} .tba-drawer__head .tba-brand{padding:0} .tba-drawer__head .tba-brand img{width:150px} .tba-drawer nav{padding:12px 24px 24px} .tba-drawer__link{ display:flex;align-items:center;justify-content:space-between;width:100%; padding:17px 0;border-bottom:1px solid var(--tba-line-soft); font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tba-black) } .tba-drawer__sub{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .45s var(--tba-ease)} .tba-drawer__sub.tba-is-open{max-height:2400px} .tba-drawer__sub a{display:block;padding:13px 0 13px 18px;font-size:15px;color:var(--tba-ink-soft);border-bottom:1px solid var(--tba-line-soft)} .tba-drawer__sub--child{padding-left:36px !important;font-size:12.5px !important;color:var(--tba-ink-mute) !important} .tba-drawer__foot{margin-top:auto;padding:26px;background:var(--tba-black)} .tba-drawer__foot .tba-btn{width:100%} .tba-drawer__foot .tba-socials{margin-top:20px;justify-content:center} .tba-drawer__foot .tba-socials a{color:rgba(255,255,255,.65)} .tba-drawer__foot .tba-socials a:hover{color:var(--tba-gold)} /* ============================================================ HERO ============================================================ */ .tba-hero{position:relative;background:#d8d4d1;overflow:hidden;padding-bottom:clamp(34px,4.5vw,64px)} .tba-hero__media{position:absolute;inset:0} .tba-hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 30%} .tba-hero__media::after{ content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(12,10,9,.88) 0%,rgba(12,10,9,.74) 34%,rgba(12,10,9,.5) 62%,rgba(12,10,9,.34) 100%) } .tba-hero__inner{position:relative;z-index:2;min-height:clamp(520px,72vh,760px);display:flex;align-items:center;padding-block:clamp(52px,6vw,88px) clamp(28px,3.2vw,44px)} .tba-hero__grid{display:grid;grid-template-columns:1fr minmax(0,600px);gap:clamp(38px,7vw,124px);align-items:center;width:100%} .tba-hero__copy{max-width:none;color:#fff} .tba-hero__copy .tba-eyebrow{color:var(--tba-gold-lt)} .tba-hero h1{color:#fff;margin-bottom:14px} .tba-hero .tba-rule{margin:0 0 26px} .tba-hero__copy h2{ font-family:var(--tba-sans);font-size:clamp(16px,1.15vw,18px);font-weight:400;line-height:1.75; color:rgba(255,255,255,.85);margin-bottom:30px } /* ---------- hero consultation form ---------- */ .tba-heroform{ background:var(--tba-blush);border:1px solid rgba(220,162,119,.55);border-radius:16px;padding:9px; box-shadow:0 30px 70px rgba(12,10,9,.32);width:100%;justify-self:end;max-width:620px } .tba-heroform__inner{border:1px solid rgba(220,162,119,.3);border-radius:9px;padding:clamp(22px,2.3vw,34px)} .tba-heroform__title{font-family:var(--tba-serif);font-size:clamp(23px,2vw,31px);font-weight:500;letter-spacing:.02em;text-transform:uppercase;text-align:center;color:var(--tba-black)} .tba-heroform__sub{font-size:15px;color:var(--tba-ink-soft);text-align:center;margin:9px 0 0} .tba-heroform__promo{ margin:20px 0 24px;padding:13px 16px;text-align:center; background:#fbeee2;border:1px dashed rgba(220,162,119,.75);border-radius:8px; font-size:15px;color:#8a5a34;line-height:1.5 } .tba-heroform__promo b{font-weight:600;color:#8a4f22} .tba-heroform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .tba-hfield{display:block;margin-bottom:16px} .tba-hfield span{display:block;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tba-ink-soft);margin-bottom:8px} .tba-hfield input,.tba-hfield select,.tba-hfield textarea{ width:100%;min-height:52px;padding:14px 15px;font:inherit;font-size:16px;color:var(--tba-ink); background:#fff;border:1px solid #e4ddd6;border-radius:8px;transition:border-color .3s,box-shadow .3s } .tba-hfield textarea{min-height:104px;resize:vertical;line-height:1.6} .tba-hfield input::placeholder,.tba-hfield textarea::placeholder{color:#a6a09a} .tba-hfield input:focus,.tba-hfield select:focus,.tba-hfield textarea:focus{ outline:none;border-color:var(--tba-gold);box-shadow:0 0 0 3px rgba(220,162,119,.16) } .tba-heroform .tba-btn{width:100%;margin-top:6px;border-radius:8px} .tba-heroform__fine{font-size:12.5px;line-height:1.65;color:var(--tba-ink-mute);text-align:center;margin:16px 0 0} .tba-hero__proof{ position:relative;z-index:2;list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:clamp(10px,1.2vw,18px) } .tba-hero__proof li{ position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center;text-align:center; min-height:112px;padding:26px 22px; background:linear-gradient(160deg,rgba(255,255,255,.17),rgba(255,255,255,.06)); border:1px solid rgba(220,162,119,.55);border-radius:14px; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:0 0 22px rgba(220,162,119,.16),0 12px 34px rgba(12,10,9,.34), inset 0 1px 0 rgba(255,255,255,.16); color:#fff;font-size:20px;font-weight:600;line-height:1.35; text-shadow:0 1px 14px rgba(12,10,9,.55); transition:background var(--tba-slow),border-color var(--tba-slow),box-shadow var(--tba-slow),transform var(--tba-slow) } .tba-hero__proof li:hover{ background:linear-gradient(160deg,rgba(220,162,119,.36),rgba(220,162,119,.16)); border-color:var(--tba-gold); box-shadow:0 0 34px rgba(220,162,119,.45),0 18px 44px rgba(12,10,9,.44), inset 0 1px 0 rgba(255,255,255,.24); transform:translateY(-4px) } /* slow light sweep, staggered so the four catch the light in sequence */ .tba-hero__proof li::after{ content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent); transform:translateX(-260%) skewX(-18deg); animation:proofSheen 7s ease-in-out infinite } .tba-hero__proof li:nth-child(2)::after{animation-delay:.45s} .tba-hero__proof li:nth-child(3)::after{animation-delay:.9s} .tba-hero__proof li:nth-child(4)::after{animation-delay:1.35s} @keyframes proofSheen{ 0%,62%{transform:translateX(-260%) skewX(-18deg)} 100%{transform:translateX(330%) skewX(-18deg)} } @media (prefers-reduced-motion:reduce){.tba-hero__proof li::after{animation:none;opacity:0}} /* ============================================================ REVIEWS MARQUEE ============================================================ */ .tba-reviews{background:var(--tba-paper);padding-block:clamp(52px,6vw,86px);overflow:hidden;border-block:1px solid var(--tba-line-soft)} .tba-reviews__head{text-align:center;max-width:820px;margin:0 auto clamp(38px,4.5vw,60px)} .tba-reviews__rating{ display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px 16px; margin-top:28px;padding:14px 28px; background:#fff;border:1px solid var(--tba-line-gold);border-radius:60px; box-shadow:0 10px 30px rgba(17,17,17,.05) } .tba-reviews__rating svg{flex:none} .tba-reviews__score{font-family:var(--tba-serif);font-size:32px;font-weight:600;line-height:1;color:var(--tba-black)} .tba-stars{display:inline-flex;gap:3px;color:var(--tba-gold)} .tba-stars svg{width:16px;height:16px} .tba-stars--lg svg{width:24px;height:24px} .tba-reviews__count{font-size:13.5px;color:var(--tba-ink-soft);white-space:nowrap} .tba-reviews__count b{font-weight:700;color:var(--tba-black)} .tba-marquee{overflow:hidden;contain:inline-size;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .tba-marquee__track{display:flex;gap:24px;width:max-content;animation:slide 150s linear infinite} .tba-marquee:hover .tba-marquee__track{animation-play-state:paused} @keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} @media (prefers-reduced-motion:reduce){.tba-marquee__track{animation:none}.tba-marquee{overflow-x:auto}} .tba-rcard{ flex:0 0 clamp(292px,26vw,372px);background:#fff;border:1px solid var(--tba-line-soft); padding:30px 30px 28px;display:flex;flex-direction:column;gap:14px; transition:border-color var(--tba-slow),box-shadow var(--tba-slow) } .tba-rcard:hover{border-color:var(--tba-line-gold);box-shadow:0 18px 44px rgba(17,17,17,.06)} .tba-rcard__top{display:flex;align-items:center;gap:13px} .tba-rcard__avatar{ width:42px;height:42px;flex:0 0 42px;border-radius:50%; background:var(--tba-g-color,var(--tba-black));color:#fff; display:grid;place-items:center;font-size:16px;font-weight:500;line-height:1 } .tba-rcard__g{margin-left:auto;flex:none;align-self:flex-start} .tba-rcard__who{min-width:0} .tba-rcard__name{font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--tba-black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tba-rcard__when{font-size:12.5px;color:var(--tba-ink-mute);letter-spacing:.02em} .tba-rcard__body{font-size:18px;line-height:1.65;color:var(--tba-ink-soft);margin:0; display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden} .tba-rcard.tba-is-open .tba-rcard__body{-webkit-line-clamp:unset;display:block;overflow:visible} .tba-rcard .tba-stars svg{width:13px;height:13px} .tba-rcard__more{ align-self:flex-start;margin-top:2px;padding:0; font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--tba-gold-dp);border-bottom:1px solid transparent;transition:.3s var(--tba-ease) } .tba-rcard__more:hover{color:var(--tba-black);border-bottom-color:var(--tba-gold)} /* only the expanded card grows; its neighbours keep their height */ .tba-marquee__track{align-items:flex-start} /* ============================================================ SPLIT BLOCKS ============================================================ */ .tba-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,84px);align-items:center} .tba-split--reverse .tba-split__media{order:2} .tba-split__media{position:relative} .tba-split__media img{width:100%;object-fit:cover} .tba-split__media--frame::before{ content:"";position:absolute;inset:22px -22px -22px 22px;border:1px solid var(--tba-gold);z-index:-1 } .tba-split__body{max-width:none} .tba-press{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px} .tba-press a{ display:grid;place-items:center;padding:14px 16px;background:#fff; border:1px solid rgba(220,162,119,.45);border-radius:8px; transition:border-color var(--tba-slow),transform var(--tba-slow),box-shadow var(--tba-slow) } .tba-press a:hover{border-color:var(--tba-gold);transform:translateY(-3px);box-shadow:0 14px 30px rgba(17,17,17,.1)} .tba-press img{width:100%} /* featured in */ /* read more */ .tba-readmore{position:relative} .tba-readmore__body{max-height:0;overflow:hidden;transition:max-height .7s var(--tba-ease)} .tba-readmore.tba-is-open .tba-readmore__body{max-height:6000px} .tba-readmore__body>h3:first-child{margin-top:34px} .tba-readmore h3{font-family:var(--tba-serif);font-size:clamp(20px,1.8vw,26px);font-weight:500;letter-spacing:.02em;text-transform:uppercase;line-height:1.28;margin:38px 0 14px} .tba-readmore h3:first-child{margin-top:0} .tba-readmore__toggle{margin-top:26px} .tba-intro{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,80px);align-items:start} .tba-intro__body{max-width:none} .tba-intro__media{position:relative} .tba-video-wrap{width:100%;margin:0;background:#000;border:1px solid var(--tba-line-gold);padding:8px} .tba-video-wrap video{width:100%;display:block;aspect-ratio:1;object-fit:cover;background:#000} /* ============================================================ COURSE GRID ============================================================ */ .tba-courses{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.9vw,30px)} .tba-course{ position:relative;display:block;overflow:hidden;background:var(--tba-mist); border:1px solid rgba(220,162,119,.85);border-radius:12px; box-shadow:0 0 0 3px rgba(220,162,119,.1),0 12px 30px rgba(17,17,17,.1); transition:border-color var(--tba-slow),box-shadow var(--tba-slow),transform var(--tba-slow) } .tba-course:hover{ border-color:var(--tba-gold); box-shadow:0 0 0 4px rgba(220,162,119,.22),0 24px 52px rgba(17,17,17,.2); transform:translateY(-5px) } .tba-course figure{margin:0;overflow:hidden} .tba-course img{aspect-ratio:3/4;width:100%;object-fit:cover;transition:transform 1.1s var(--tba-ease)} .tba-course:hover img{transform:scale(1.08)} .tba-course__veil{ position:absolute;inset:0;transition:background var(--tba-slow); background:linear-gradient(to top,rgba(12,10,9,.92) 0%,rgba(12,10,9,.55) 34%,rgba(12,10,9,.12) 64%,rgba(12,10,9,0) 82%) } /* gold hairline that draws itself inside the card on hover */ .tba-course::after{ content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.55);border-radius:6px; opacity:0;transform:scale(1.03);transition:.55s var(--tba-ease);pointer-events:none } .tba-course:hover::after{opacity:.85;transform:none} .tba-course__cap{position:absolute;left:0;right:0;bottom:0;padding:30px 26px;color:#fff;z-index:2} .tba-course__cap h3{ font-family:var(--tba-serif);font-size:clamp(23px,2vw,32px);font-weight:500;line-height:1.18; overflow-wrap:break-word;color:#fff;text-shadow:0 2px 16px rgba(12,10,9,.6) } .tba-course__cap span{ display:inline-flex;align-items:center;gap:9px;margin-top:10px; font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tba-gold-lt); opacity:0;transform:translateY(9px);transition:.5s var(--tba-ease) } .tba-course:hover .tba-course__cap span{opacity:1;transform:none} /* ============================================================ SUCCESS STORY — cream panel, portrait, awards, thumbnails ============================================================ */ .tba-ss{ background:var(--tba-blush);border:1px solid rgba(220,162,119,.28);border-radius:22px; padding:clamp(30px,4.4vw,72px) } .tba-ss__head{text-align:center;margin:0 0 clamp(34px,4vw,58px)} .tba-ornament{ display:inline-flex;align-items:center;gap:18px; font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--tba-gold-dp);margin:0 0 20px } .tba-ornament::before,.tba-ornament::after{content:"";width:clamp(28px,4.5vw,64px);height:1px;background:var(--tba-gold)} .tba-ss__head h2 em{font-style:italic;color:var(--tba-gold-dp)} .tba-swash{display:block;margin:20px auto 0;color:var(--tba-gold)} .tba-ss__grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(28px,4vw,64px);align-items:start} .tba-ss__portrait{ margin:0;position:relative;border-radius:14px;overflow:hidden; box-shadow:0 26px 62px rgba(17,17,17,.14) } .tba-ss__portrait img{width:100%;aspect-ratio:3/4.05;object-fit:cover;object-position:center 20%} .tba-ss__portrait::after{ content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.5); border-radius:7px;pointer-events:none } .tba-ss__body{max-width:none} .tba-ss__name{font-family:var(--tba-serif);font-size:clamp(21px,1.9vw,28px);font-weight:500;letter-spacing:.02em;text-transform:uppercase;margin-bottom:18px} .tba-ss__body p{font-size:15.5px;line-height:1.8;margin-bottom:1.05em} .tba-ss__body b{font-weight:500;color:var(--tba-black)} .tba-ss-link{ color:var(--tba-gold-dp); background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat; transition:color .3s } .tba-ss-link:hover{color:var(--tba-black)} .tba-ss__awards{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:24px 0;padding:0} .tba-ss__awards li{ display:inline-flex;align-items:center;gap:9px;padding:10px 17px; background:#fff;border:1px solid rgba(220,162,119,.4);border-radius:40px; font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--tba-black);line-height:1.4 } .tba-ss__awards svg{color:var(--tba-gold);flex:none} .tba-ss__ig{ display:inline-flex;align-items:center;gap:10px;margin-top:4px; font-size:15px;font-weight:500;color:var(--tba-gold-dp);transition:color .3s } .tba-ss__ig:hover{color:var(--tba-black)} .tba-ss__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 32px} .tba-ss__thumbs figure{margin:0;overflow:hidden;border-radius:10px;background:var(--tba-mist)} .tba-ss__thumbs img{aspect-ratio:1;width:100%;object-fit:cover;transition:transform 1s var(--tba-ease)} .tba-ss__thumbs figure:hover img{transform:scale(1.07)} /* ============================================================ FOUNDER ============================================================ */ .tba-founder{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,88px);align-items:center} .tba-founder__media{ margin:0;position:relative;background:#fff;padding:10px; box-shadow:0 28px 66px rgba(17,17,17,.12) } .tba-founder__media img{ width:100%;aspect-ratio:3/3.9;object-fit:cover;object-position:center 15%; filter:grayscale(1) contrast(1.03) } .tba-founder__media::after{ content:"";position:absolute;inset:22px;border:1px solid rgba(255,255,255,.5);pointer-events:none } .tba-founder__body{max-width:none} .tba-eyebrow--rule{display:inline-flex;align-items:center;gap:16px} .tba-eyebrow--rule::before{content:"";width:clamp(26px,3vw,46px);height:1px;background:var(--tba-gold)} .tba-founder__role{ font-family:var(--tba-serif);font-style:italic;font-weight:400; font-size:clamp(20px,1.75vw,27px);color:var(--tba-gold-dp);margin:12px 0 22px } .tba-founder__list{list-style:none;margin:28px 0 34px;padding:0;display:grid;gap:17px} .tba-founder__list li{display:flex;gap:14px;align-items:flex-start;font-size:16px;color:var(--tba-ink-soft);line-height:1.7} .tba-founder__list svg{color:var(--tba-gold);flex:none;margin-top:4px} .tba-founder__list b{font-weight:500;color:var(--tba-black)} /* ============================================================ STUDENT STORIES ============================================================ */ .tba-stories{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,46px)} .tba-story figure{margin:0 0 24px;overflow:hidden;background:var(--tba-mist)} .tba-story img{aspect-ratio:1;width:100%;object-fit:cover;transition:transform 1s var(--tba-ease)} .tba-story:hover img{transform:scale(1.06)} .tba-story h3{font-family:var(--tba-sans);font-size:17px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px} .tba-story p{font-size:16px;color:var(--tba-ink-soft);margin-bottom:22px} /* ============================================================ NEWSLETTER — full-bleed image, dark veil, gold frame ============================================================ */ .tba-newsletter{position:relative;text-align:center;background:var(--tba-black);isolation:isolate;overflow:hidden} .tba-newsletter::before{ content:"";position:absolute;inset:0;z-index:-2; background:var(--tba-news-bg,#111) center/cover no-repeat } .tba-newsletter::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(rgba(12,10,9,.84),rgba(12,10,9,.9)) } .tba-newsletter .tba-h-lg{color:#fff} .tba-newsletter .tba-eyebrow{color:var(--tba-gold)} .tba-newsletter p{color:rgba(255,255,255,.72);max-width:56ch;margin-inline:auto} .tba-nform{display:flex;gap:12px;max-width:560px;margin:34px auto 0} .tba-nform input{ flex:1;min-height:56px;padding:0 20px;background:rgba(255,255,255,.05);color:#fff; border:1px solid rgba(255,255,255,.24);border-radius:var(--tba-radius);font:inherit;font-size:16px; transition:border-color .3s,background .3s } .tba-nform input::placeholder{color:rgba(255,255,255,.45)} .tba-nform input:focus{outline:none;border-color:var(--tba-gold);background:rgba(255,255,255,.08)} .tba-nform input{margin-bottom:0;height:66px;min-height:66px} .tba-footer a,.tba-footer a:visited{color:inherit;transition:color .3s} /* ============================================================ CONTACT — light column, black form panel ============================================================ */ .tba-contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,68px);align-items:start} .tba-info-list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:24px} .tba-info-list li{display:flex;gap:18px;align-items:flex-start} .tba-info-list .tba-ic{ width:44px;height:44px;flex:0 0 44px;border-radius:50%; background:transparent;border:1px solid var(--tba-line-gold);color:var(--tba-gold-dp); display:grid;place-items:center;transition:.4s var(--tba-ease) } .tba-info-list li:hover .tba-ic{background:var(--tba-black);border-color:var(--tba-black);color:var(--tba-gold)} .tba-info-list h4{font-family:var(--tba-sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tba-ink-mute);margin-bottom:6px} .tba-info-list a,.tba-info-list p{font-size:16px;color:var(--tba-ink);margin:0;line-height:1.7} .tba-info-list a:hover{color:var(--tba-gold-dp)} .tba-map{margin-top:36px;border:1px solid var(--tba-line-soft);background:var(--tba-mist)} .tba-map iframe{display:block;width:100%;height:clamp(270px,30vw,350px);border:0} .tba-cform{background:var(--tba-black);color:#fff;padding:clamp(30px,3.2vw,50px);border:1px solid var(--tba-black)} .tba-cform .tba-h-md{color:#fff;margin-bottom:10px;text-align:center} .tba-cform>p{color:#fff;font-size:15.5px;text-align:center} .tba-cform__promo{ margin:22px 0 4px;padding:13px 16px;text-align:center; background:rgba(220,162,119,.14);border:1px dashed rgba(220,162,119,.6);border-radius:8px; font-size:15px;color:var(--tba-gold-lt);line-height:1.5 } .tba-cform__promo b{font-weight:700;color:var(--tba-gold)} .tba-field{display:block;margin-top:22px} .tba-field span{display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tba-gold);margin-bottom:10px} .tba-field input,.tba-field select,.tba-field textarea{ width:100%;min-height:52px;padding:14px 16px;font:inherit;font-size:16px;color:#fff; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);border-radius:var(--tba-radius); transition:border-color .3s,background .3s } .tba-field select{color:#fff} .tba-field select option{color:var(--tba-black);background:#fff} .tba-field textarea{min-height:136px;resize:vertical} .tba-field input:focus,.tba-field select:focus,.tba-field textarea:focus{outline:none;border-color:var(--tba-gold);background:rgba(255,255,255,.09)} .tba-cform .tba-btn{width:100%;margin-top:30px;--tba-btn-bg:var(--tba-gold);--tba-btn-bd:var(--tba-gold);--tba-btn-fg:#241a12; --tba-btn-bg-h:#fff;--tba-btn-fg-h:var(--tba-black);--tba-btn-bd-h:#fff} .tba-cform__note{font-size:13px;color:rgba(255,255,255,.55);margin-top:18px;text-align:center;letter-spacing:.03em} .tba-formrow{display:grid;grid-template-columns:1fr 1fr;gap:18px} /* ============================================================ FOOTER ============================================================ */ .tba-footer{background:var(--tba-black);color:rgba(255,255,255,.7);padding-block:clamp(56px,6vw,90px) 0;font-size:15.5px;border-top:1px solid rgba(220,162,119,.3)} .tba-footer__grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr .9fr;gap:clamp(26px,3vw,50px)} .tba-footer h4{ font-family:var(--tba-sans);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--tba-gold);margin-bottom:24px } .tba-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px} .tba-footer a{transition:color .3s} .tba-footer a:hover{color:var(--tba-gold)} .tba-footer__brand{justify-self:start;text-align:left;padding:0;width:100%} .tba-footer__brand img{width:200px;margin:0 0 22px;margin-inline:0} .tba-footer__brand .tba-brand__fallback{text-align:left;margin-bottom:20px} .tba-footer .tba-socials{display:flex;gap:15px} .tba-footer .tba-socials a{color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.16);border-radius:50%;width:36px;height:36px} .tba-footer .tba-socials a:hover{color:var(--tba-gold);border-color:var(--tba-line-gold)} .tba-footer__pay{margin-top:24px;max-width:150px;opacity:.85} .tba-footer__bottom{ margin-top:clamp(42px,4.5vw,66px);border-top:1px solid rgba(255,255,255,.11); padding-block:26px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between; font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55) } .tba-footer__acc{display:none} /* from */ .tba-footer a{transition:color .3s} /* to */ .tba-footer a,.tba-footer a:visited{color:inherit;transition:color .3s} .tba-footer__menu li {margin-bottom:0px;} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1340px){ /* desktop nav is still on between 1024px and 1440px — tighten so the larger menu type and CTA keep fitting either side of the logo */ .tba-nav{gap:17px} .tba-nav__link{font-size:12.5px;letter-spacing:.07em} .tba-btn--sm{padding:0 16px;font-size:11.5px;letter-spacing:.07em} .tba-brand{padding-inline:8px} .tba-brand img{width:clamp(132px,11vw,160px)} .tba-icon-btn{width:38px;height:38px} } @media (max-width:1200px){ .tba-mega__grid{grid-template-columns:repeat(3,1fr)} .tba-footer__grid{grid-template-columns:1fr 1fr 1fr} } @media (max-width:1024px){ .tba-navbar{display:none} .tba-mobilebar{display:block} .tba-courses{grid-template-columns:repeat(3,1fr)} .tba-hero__grid{grid-template-columns:1fr;gap:38px} .tba-hero__proof{grid-template-columns:repeat(2,1fr)} .tba-heroform{justify-self:stretch;max-width:640px;margin-inline:auto} .tba-hero__media::after{background:linear-gradient(180deg,rgba(12,10,9,.45) 0%,rgba(12,10,9,.66) 55%,rgba(12,10,9,.82) 100%)} } @media (max-width:860px){ .tba-split,.tba-contact__grid,.tba-stories,.tba-founder,.tba-ss__grid,.tba-intro{grid-template-columns:1fr} .tba-split--reverse .tba-split__media{order:0} .tba-founder__media{order:-1} .tba-founder__media,.tba-ss__portrait{max-width:520px;margin-inline:auto} .tba-ss__body,.tba-founder__body{max-width:none} .tba-split__media--frame::before{display:none} .tba-courses{grid-template-columns:repeat(2,1fr)} .tba-footer__grid{grid-template-columns:1fr} .tba-footer__acc{display:block} .tba-footer .tba-footer__menu{display:none} .tba-footer .tba-footer__menu.tba-is-open{display:grid;padding-bottom:10px} .tba-footer h4[data-facc]{display:flex;align-items:center;justify-content:space-between;cursor:pointer; padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.11);margin-bottom:18px} } @media (max-width:640px){ .tba-formrow,.tba-heroform__row{grid-template-columns:1fr} .tba-heroform__row{gap:0} .tba-nform{flex-direction:column} .tba-hero__proof{gap:8px} .tba-hero__proof li{min-height:92px;padding:18px 12px;font-size:16px} .tba-btn{width:100%;padding:0 22px;font-size:13px;min-height:60px;white-space:normal;line-height:1.35} .tba-btn-row{flex-direction:column} .tba-announce .tba-shell{grid-template-columns:1fr;gap:0;padding-block:9px} .tba-announce__social,.tba-announce__links{display:none} .tba-announce__text{font-size:13px;letter-spacing:.04em} .tba-course__cap{padding:20px 16px} .tba-press{gap:9px} .tba-press a{padding:10px 10px} }