/* ========================================================================== Global Trade — gtegy.com Design system. One stylesheet, shared by the English and Arabic trees. Direction is handled with logical properties (margin-inline, padding-inline, inset-inline, text-align:start/end) so the Arabic pages need no override sheet — setting dir="rtl" on is enough. ========================================================================== */ /* ------------------------------------------------------------------ fonts */ @font-face{font-family:'Lora';src:url('../fonts/Lora-Medium.woff2') format('woff2'); font-weight:500;font-display:swap;} @font-face{font-family:'Lora';src:url('../fonts/Lora-SemiBold.woff2') format('woff2'); font-weight:400 700;font-display:swap;} @font-face{font-family:'Inter';src:url('../fonts/Inter-Regular.woff2') format('woff2'); font-weight:400;font-display:swap;} @font-face{font-family:'Inter';src:url('../fonts/Inter-Bold.woff2') format('woff2'); font-weight:700;font-display:swap;} @font-face{font-family:'Amiri';src:url('../fonts/Amiri-Regular.woff2') format('woff2'); font-weight:400;font-display:swap;} @font-face{font-family:'Amiri';src:url('../fonts/Amiri-Bold.woff2') format('woff2'); font-weight:700;font-display:swap;} @font-face{font-family:'Cairo';src:url('../fonts/Cairo-Regular.woff2') format('woff2'); font-weight:400;font-display:swap;} @font-face{font-family:'Cairo';src:url('../fonts/Cairo-Bold.woff2') format('woff2'); font-weight:700;font-display:swap;} /* ------------------------------------------------------------------ tokens */ :root{ /* v2 identity (2026-09-08): warm stone palette from the approved logo. Variable names kept from v1 to avoid touching every rule: --navy now carries ink-charcoal, --gold carries terracotta, --gold-600 carries bronze (the wordmark colour). Measured contrast: ink/white 12.4 · bronze/white 6.31 · terracotta/white 4.51 (AA floor — white button text OK, never small text on tinted grounds). */ --navy:#303539; --navy-700:#3D434A; --navy-900:#2B2521; --gold:#B16143; --gold-600:#7A5A2E; --gold-100:#F3E2D3; --cream:#F0E2CF; --cream-50:#FAF5EC; --ink:#303539; --body:#41474E; --stone:#6E6A62; --line:#E8E0D1; --line-strong:#D6CBB8; --white:#fff; --display:'Lora',Georgia,'Times New Roman',serif; --text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --wrap:1180px; --gutter:clamp(1.25rem,4vw,3rem); --radius:3px; --shadow:0 1px 2px rgba(43,37,33,.05),0 8px 28px rgba(43,37,33,.08); --shadow-lg:0 2px 6px rgba(43,37,33,.07),0 20px 56px rgba(43,37,33,.14); --ease:cubic-bezier(.22,.61,.36,1); } /* Arabic tree swaps the two families and loosens leading. Arabic needs more line-height than Latin at the same optical size. */ [lang="ar"]{ --display:'Amiri','Cinzel',Georgia,serif; --text:'Cairo','Inter',system-ui,sans-serif; } /* Amiri carries the headings beautifully but is a naskh with fine strokes: at button and label sizes it goes thin and hard to read. Everything small and functional falls back to Cairo, which holds its weight down to ~12px. */ [lang="ar"] .btn, [lang="ar"] .lang, [lang="ar"] .eyebrow, [lang="ar"] .field label, [lang="ar"] .specs dt, [lang="ar"] .stone__type, [lang="ar"] .card__num, [lang="ar"] .site-footer h4, [lang="ar"] .tag, [lang="ar"] .stat__l{ font-family:var(--text); font-weight:700; } /* ------------------------------------------------------------------- base */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;} } body{ margin:0;background:var(--white);color:var(--body); font-family:var(--text);font-size:1.0625rem;line-height:1.7; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } [lang="ar"] body{line-height:1.95;font-size:1.09rem;} img,svg{max-width:100%;height:auto;display:block;} a{color:var(--navy);text-decoration-color:var(--gold);text-underline-offset:.22em;} a:hover{color:var(--gold-600);} :focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:2px;} h1,h2,h3,h4{font-family:var(--display);color:var(--navy);font-weight:700; line-height:1.18;margin:0;letter-spacing:.02em;} [lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4{line-height:1.5;letter-spacing:0;} p{margin:0 0 1.15rem;} p:last-child{margin-bottom:0;} .skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--navy);color:#fff; padding:.7rem 1.2rem;z-index:200;} .skip:focus{inset-inline-start:0;} /* ------------------------------------------------------------------ layout */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);} .section{padding-block:clamp(4rem,9vw,7.5rem);} .section--tight{padding-block:clamp(3rem,6vw,5rem);} .section--cream{background:var(--cream-50);} .section--navy{background:var(--navy);color:rgba(255,255,255,.80);} .section--navy h2,.section--navy h3,.section--navy h4{color:#fff;} .eyebrow{font-family:var(--display);font-size:.75rem;letter-spacing:.26em;text-transform:uppercase; color:var(--gold-600);font-weight:700;margin:0 0 1rem;} [lang="ar"] .eyebrow{letter-spacing:0;font-size:.9rem;} .section--navy .eyebrow{color:var(--gold);} .h-lead{font-size:clamp(1.9rem,4.2vw,2.9rem);letter-spacing:.045em;} .h-sec{font-size:clamp(1.6rem,3.4vw,2.3rem);letter-spacing:.05em;} .lede{font-size:clamp(1.06rem,1.7vw,1.22rem);line-height:1.72;color:var(--body);max-width:64ch;} [lang="ar"] .lede{line-height:2;} .section--navy .lede{color:rgba(255,255,255,.78);} .measure{max-width:68ch;} .gold-rule{width:64px;height:2px;background:var(--gold);margin:1.4rem 0 1.8rem;border:0;} .section--navy .gold-rule{background:var(--gold);} .grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem);} .grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));} .grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));} .grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));} /* ------------------------------------------------------------------ header */ .site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94); backdrop-filter:blur(10px);border-bottom:1px solid var(--line);} .site-header__in{display:flex;align-items:center;gap:2rem;min-height:82px;} .brand{flex:0 0 auto;} .brand img{height:58px;width:auto;} @media (max-width:640px){.brand img{height:46px;}} .nav{margin-inline-start:auto;display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.1rem);} .nav a{font-size:.83rem;letter-spacing:.13em;text-transform:uppercase;text-decoration:none; color:var(--navy);font-weight:700;padding-block:.4rem;position:relative;white-space:nowrap;} [lang="ar"] .nav a{letter-spacing:0;font-size:.98rem;text-transform:none;} .nav a::after{content:'';position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--gold); transform:scaleX(0);transform-origin:center;transition:transform .3s var(--ease);} .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);} .nav a[aria-current="page"]{color:var(--gold-600);} .lang{font-family:var(--display);font-size:.78rem;letter-spacing:.14em;text-decoration:none; border:1px solid var(--line-strong);padding:.44rem .9rem;border-radius:var(--radius); color:var(--navy);font-weight:700;transition:all .25s var(--ease);} .lang:hover{background:var(--navy);color:#fff;border-color:var(--navy);} .nav-toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:var(--radius); padding:.5rem .6rem;cursor:pointer;margin-inline-start:auto;} .nav-toggle span{display:block;width:20px;height:2px;background:var(--navy);margin:4px 0; transition:transform .3s var(--ease),opacity .2s;} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} @media (max-width:900px){ .nav-toggle{display:block;} .nav{position:fixed;inset-block:82px auto;inset-inline:0;background:#fff;flex-direction:column; align-items:stretch;gap:0;padding:.5rem var(--gutter) 1.5rem;border-bottom:1px solid var(--line); box-shadow:var(--shadow);margin-inline-start:0; transform:translateY(-8px);opacity:0;visibility:hidden;transition:all .25s var(--ease);} .nav[data-open="true"]{transform:translateY(0);opacity:1;visibility:visible;} .nav a{padding-block:.95rem;border-bottom:1px solid var(--line);font-size:.95rem;} .nav a::after{display:none;} .lang{margin-top:1rem;text-align:center;} } /* -------------------------------------------------------------------- hero */ .hero{position:relative;background:var(--navy);color:#fff;overflow:hidden; padding-block:clamp(5rem,13vw,9.5rem);} .hero__bg{position:absolute;inset:0;opacity:.10;pointer-events:none; background-image:url('../img/gt-final-mark-transparent.svg');background-repeat:no-repeat; background-position:right -140px center;background-size:min(620px,72vw);} [dir="rtl"] .hero__bg{background-position:left -140px center;} .hero__in{position:relative;max-width:none;} .hero h1{color:#fff;font-size:clamp(2.3rem,6.2vw,4.3rem);letter-spacing:.055em;max-width:15ch;} [lang="ar"] .hero h1{letter-spacing:0;max-width:18ch;} .hero .lede{color:rgba(255,255,255,.80);margin-top:1.9rem;max-width:56ch;} .hero__tag{font-family:var(--display);color:var(--gold);font-size:clamp(.78rem,1.5vw,.92rem); letter-spacing:.3em;text-transform:uppercase;margin:0 0 1.5rem;font-weight:700;} [lang="ar"] .hero__tag{letter-spacing:0;} .hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.6rem;} /* ------------------------------------------------------------------ button */ .btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700; font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none; padding:1rem 2rem;border-radius:var(--radius);border:1.5px solid transparent;cursor:pointer; transition:all .28s var(--ease);} [lang="ar"] .btn{letter-spacing:0;font-size:.98rem;text-transform:none;} .btn--gold{background:var(--gold);color:#fff;border-color:var(--gold);} .btn--gold:hover{background:var(--gold-600);border-color:var(--gold-600);color:#fff; transform:translateY(-2px);box-shadow:0 10px 24px rgba(177,97,67,.30);} .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42);} .btn--ghost:hover{background:rgba(255,255,255,.09);border-color:#fff;color:#fff;transform:translateY(-2px);} .btn--navy{background:var(--navy);color:#fff;border-color:var(--navy);} .btn--navy:hover{background:var(--navy-700);border-color:var(--navy-700);color:#fff; transform:translateY(-2px);box-shadow:var(--shadow);} /* -------------------------------------------------------------------- card */ .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2.1rem 1.9rem; transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--gold);} .card h3{font-size:1.16rem;letter-spacing:.06em;margin-bottom:.85rem;} [lang="ar"] .card h3{letter-spacing:0;font-size:1.3rem;} .card p{font-size:.98rem;line-height:1.68;margin:0;} .card__num{font-family:var(--display);font-size:.76rem;letter-spacing:.2em;color:var(--gold-600); font-weight:700;display:block;margin-bottom:1rem;} .section--navy .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.14);} .section--navy .card:hover{border-color:var(--gold);background:rgba(255,255,255,.075);} .section--navy .card p{color:rgba(255,255,255,.75);} /* ------------------------------------------------------------------- stone */ /* Swatches are CSS gradients, not photographs — honest placeholders that carry the right hue without pretending to be a picture of the actual slab. */ .stone{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff; transition:transform .3s var(--ease),box-shadow .3s var(--ease);} .stone:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);} .stone__swatch{height:168px;position:relative;} .stone__swatch::after{content:'';position:absolute;inset:0; background:repeating-linear-gradient(112deg,rgba(255,255,255,.30) 0 2px,transparent 2px 13px), repeating-linear-gradient(64deg,rgba(0,0,0,.055) 0 1px,transparent 1px 22px);} .stone__body{padding:1.35rem 1.4rem 1.6rem;} .stone__body h3{font-size:1.04rem;letter-spacing:.07em;margin-bottom:.3rem;} [lang="ar"] .stone__body h3{letter-spacing:0;font-size:1.2rem;} .stone__type{font-size:.73rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-600); font-weight:700;margin-bottom:.75rem;} [lang="ar"] .stone__type{letter-spacing:0;font-size:.86rem;text-transform:none;} .stone__body p{font-size:.92rem;line-height:1.6;color:var(--stone);margin:0;} /* --------------------------------------------------------------- spec list */ .specs{border-top:1px solid var(--line);margin:0;padding:0;} .specs div{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:1rem 2rem; padding:1.05rem 0;border-bottom:1px solid var(--line);} .specs dt{font-family:var(--display);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase; color:var(--gold-600);font-weight:700;margin:0;padding-top:.18rem;} [lang="ar"] .specs dt{letter-spacing:0;font-size:.95rem;text-transform:none;} .specs dd{margin:0;font-size:.99rem;color:var(--body);} @media (max-width:600px){.specs div{grid-template-columns:1fr;gap:.35rem;}} /* ------------------------------------------------------------------ figure */ .stat{text-align:center;padding:1.6rem 1rem;} .stat__n{font-family:var(--display);font-size:clamp(2rem,5vw,2.9rem);color:var(--gold); font-weight:700;line-height:1;display:block;} .stat__l{font-size:.79rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.62); margin-top:.85rem;display:block;} [lang="ar"] .stat__l{letter-spacing:0;font-size:.95rem;text-transform:none;} /* ------------------------------------------------------------------- steps */ .steps{counter-reset:s;display:grid;gap:0;} .step{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;padding:1.9rem 0; border-bottom:1px solid var(--line);} .step:last-child{border-bottom:0;} .step__n{counter-increment:s;font-family:var(--display);font-weight:700;color:var(--gold); font-size:1.05rem;width:46px;height:46px;border:1.5px solid var(--gold);border-radius:50%; display:grid;place-items:center;flex:0 0 auto;} .step__n::before{content:counter(s,decimal-leading-zero);} .step h3{font-size:1.12rem;letter-spacing:.05em;margin-bottom:.5rem;} [lang="ar"] .step h3{letter-spacing:0;font-size:1.25rem;} .step p{font-size:.98rem;margin:0;} /* -------------------------------------------------------------------- form */ .form{display:grid;gap:1.3rem;} .field{display:grid;gap:.5rem;} .field label{font-family:var(--display);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase; color:var(--navy);font-weight:700;} [lang="ar"] .field label{letter-spacing:0;font-size:.95rem;text-transform:none;} .field input,.field select,.field textarea{ font-family:var(--text);font-size:1rem;color:var(--ink);background:#fff; border:1px solid var(--line-strong);border-radius:var(--radius);padding:.85rem 1rem;width:100%; transition:border-color .22s var(--ease),box-shadow .22s var(--ease);} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,165,114,.19);} .field textarea{resize:vertical;min-height:130px;} .field .hint{font-size:.83rem;color:var(--stone);} .form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;} @media (max-width:620px){.form__row{grid-template-columns:1fr;}} .note{background:var(--cream);border-inline-start:3px solid var(--gold);padding:1.1rem 1.4rem; border-radius:var(--radius);font-size:.94rem;color:var(--body);} .note strong{color:var(--navy);} /* ------------------------------------------------------------------ footer */ .site-footer{background:var(--navy-900);color:rgba(255,255,255,.62); padding-block:clamp(3.5rem,7vw,5rem) 0;font-size:.95rem;} .site-footer h4{font-family:var(--display);font-size:.79rem;letter-spacing:.2em;text-transform:uppercase; color:var(--gold);margin-bottom:1.2rem;font-weight:700;} [lang="ar"] .site-footer h4{letter-spacing:0;font-size:.98rem;text-transform:none;} .site-footer a{color:rgba(255,255,255,.72);text-decoration:none;} .site-footer a:hover{color:var(--gold);} .site-footer__grid{display:grid;gap:2.6rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));} .site-footer__brand img{height:88px;width:auto;margin-bottom:1.3rem;} .site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.68rem;} .site-footer__bar{margin-top:3.2rem;border-top:1px solid rgba(255,255,255,.11); padding-block:1.6rem;display:flex;flex-wrap:wrap;gap:1rem; justify-content:space-between;font-size:.85rem;color:rgba(255,255,255,.42);} /* --------------------------------------------------------------- utilities */ .tag{display:inline-block;font-family:var(--display);font-size:.7rem;letter-spacing:.16em; text-transform:uppercase;color:var(--gold-600);border:1px solid var(--gold); padding:.3rem .75rem;border-radius:100px;font-weight:700;} [lang="ar"] .tag{letter-spacing:0;font-size:.85rem;text-transform:none;} .center{text-align:center;} .center .lede,.center .measure{margin-inline:auto;} .mt-lg{margin-top:2.8rem;} /* Reveal-on-scroll. Starts visible and is only hidden once JS confirms it can run, so the content is never trapped invisible with JS disabled. */ .js .reveal{opacity:0;transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease);} .js .reveal.is-in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1;transform:none;} } @media print{ .site-header,.nav,.hero__cta,.site-footer__bar{display:none;} body{font-size:11pt;} .section{padding-block:1.5rem;} } /* ---------------------------------------------------- language switcher --- */ .langs{position:relative;} .langs summary{list-style:none;cursor:pointer;font-family:var(--display);font-size:.78rem; letter-spacing:.06em;border:1px solid var(--line-strong);padding:.44rem .95rem; border-radius:var(--radius);color:var(--navy);font-weight:700;white-space:nowrap; transition:all .25s var(--ease);} .langs summary::-webkit-details-marker{display:none;} .langs summary::after{content:" ▾";font-size:.72em;} .langs summary:hover,.langs[open] summary{background:var(--navy);color:#fff;border-color:var(--navy);} .langs ul{position:absolute;inset-inline-end:0;top:calc(100% + 8px);background:#fff; border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg); list-style:none;margin:0;padding:.4rem 0;min-width:160px;z-index:130; max-height:min(72vh,420px);overflow:auto;} .langs li a,.langs li span{display:block;padding:.45rem 1.15rem;text-decoration:none; font-size:.9rem;color:var(--ink);white-space:nowrap;} .langs li span{color:var(--gold-600);font-weight:700;} .langs li a:hover{background:var(--cream-50);color:var(--gold-600);} @media (max-width:900px){ .langs{margin-top:1rem;} .langs ul{position:static;box-shadow:none;border:1px solid var(--line);max-height:none;} } /* Korean: no self-hosted Hangul face — system stacks keep the page fast. */ [lang="ko"]{ --display:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif; --text:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif; } [lang="ko"] .eyebrow,[lang="ko"] .nav a,[lang="ko"] .btn{letter-spacing:.02em;} /* Greek: Lora carries no Greek glyphs — Georgia keeps headings serif. */ [lang="el"]{--display:Georgia,'Times New Roman',serif;} /* --------------------------------------------------------- shipment tracker */ .track-row{display:flex;gap:.9rem;} .track-row input{flex:1;} @media (max-width:560px){.track-row{flex-direction:column;}} .tl{display:grid;gap:0;} .tl-step{display:flex;align-items:center;gap:1rem;padding:.68rem 0;position:relative;} .tl-step::before{content:'';position:absolute;inset-inline-start:9px;top:-14px;bottom:-14px; width:2px;background:var(--line-strong);} .tl-step:first-child::before{top:50%;} .tl-step:last-child::before{bottom:50%;} .tl-dot{width:20px;height:20px;border-radius:50%;background:#fff;position:relative;z-index:1; border:2.5px solid var(--line-strong);flex:0 0 auto;} .tl-step.done .tl-dot{background:var(--gold);border-color:var(--gold);} .tl-step.now .tl-dot{background:var(--gold-600);border-color:var(--gold-600); box-shadow:0 0 0 5px rgba(177,97,67,.18);} .tl-step.done::before{background:var(--gold);} .tl-label{font-size:.98rem;color:var(--stone);} .tl-step.done .tl-label{color:var(--body);} .tl-step.now .tl-label{color:var(--navy);font-weight:700;} .tl-events{list-style:none;margin:0;padding:0;display:grid;gap:1rem;} .tl-events li{border-inline-start:3px solid var(--gold);padding:.35rem 1.1rem; background:var(--cream-50);border-radius:var(--radius);} .tl-when{display:block;font-size:.8rem;color:var(--stone);letter-spacing:.04em;} .tl-what{display:block;font-weight:700;color:var(--navy);} .tl-note{font-size:.9rem;color:var(--body);margin-top:.2rem;}