/* * Sign-in screens (admin login, forgot, reset, setup; member portal sign in, set password, forgot password). * The markup is app/auth_brand.php. Wide screens: the brand panel on the left, filled edge to edge with the site's own * After Dark photographs in its circle (members) or diamond (back office), and the form on parchment on the right, in a * card sealed like the invitations. Phones: the panel is a band above the form and the card rises into it. * Loaded after each page's own styles, so these rules win. */ .tpe-auth{--night:#07070A;--obsidian:#0E0D0B;--panel:#15120F;--ink:#F0EBE2;--ink-dim:#CFC6BA;--ink-faint:#9C9286; --bronze:#D08B52;--bronze-deep:#9A5A2E;--gold:#C9A84C;--ember:#B23B20;--line:rgba(208,139,82,.16); --paper:#F0EBE2;--card:#FBF9F5;--text:#15120F;--text-dim:#5A5047;--text-label:#3B332B;--hair:rgba(154,90,46,.16); --round:polygon(50% 0,100% 50%,50% 100%,0 50%); min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); background:var(--paper);color:var(--ink);overflow:hidden} body.tpe-auth-body{display:block;padding:0;margin:0;min-height:100dvh;background:#F0EBE2} /* ---- the brand panel ---- */ .tpe-auth-brand{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between; gap:40px;padding:clamp(28px,4.2vw,60px);background:var(--night)} /* the photograph behind everything, edge to edge, toned down into the night */ .tpe-auth-brand::before{content:"";position:absolute;inset:-12px;z-index:-2;background:var(--bg) center/cover no-repeat; filter:brightness(.34) sepia(.5) saturate(1.2) contrast(1.1) blur(1.5px)} .tab-art{position:absolute;inset:0;z-index:-1;pointer-events:none} /* stars, as on the home page */ .tab-art::before{content:"";position:absolute;inset:0;opacity:.6; background-image: radial-gradient(1px 1px at 8% 14%,#F0EBE2,transparent 60%),radial-gradient(1px 1px at 23% 38%,#CFC6BA,transparent 60%), radial-gradient(1.4px 1.4px at 41% 9%,#F0EBE2,transparent 60%),radial-gradient(1px 1px at 57% 27%,#D08B52,transparent 60%), radial-gradient(1px 1px at 72% 12%,#CFC6BA,transparent 60%),radial-gradient(1.2px 1.2px at 88% 31%,#F0EBE2,transparent 60%), radial-gradient(1px 1px at 14% 66%,#CFC6BA,transparent 60%),radial-gradient(1px 1px at 33% 82%,#F0EBE2,transparent 60%), radial-gradient(1px 1px at 63% 71%,#C9A84C,transparent 60%),radial-gradient(1.3px 1.3px at 79% 88%,#F0EBE2,transparent 60%), radial-gradient(1px 1px at 93% 62%,#CFC6BA,transparent 60%),radial-gradient(1px 1px at 47% 55%,#F0EBE2,transparent 60%)} /* the shade that keeps the words readable */ .tab-art::after{content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(7,7,10,.94) 0%,rgba(7,7,10,.62) 30%,rgba(7,7,10,0) 58%), linear-gradient(90deg,rgba(7,7,10,.55) 0%,rgba(7,7,10,0) 50%), linear-gradient(180deg,rgba(7,7,10,.55) 0%,rgba(7,7,10,0) 16%)} /* each is one photograph: ::after the picture, ::before its rim */ .tab-art i{position:absolute;display:block;aspect-ratio:1;filter:drop-shadow(0 30px 44px rgba(0,0,0,.6))} .tab-art i::before,.tab-art i::after{content:"";position:absolute;inset:0} .tab-art i::after{background:var(--img) center/cover no-repeat;filter:sepia(.28) saturate(.95) contrast(1.06)} .tab-mark{display:flex;align-items:center;gap:12px} .tab-mark img{width:34px;height:34px;display:block} .tab-mark span{font:500 12px/1 'Cinzel',Georgia,serif;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)} .tab-line{max-width:34rem;margin-top:auto} .tab-eyebrow{margin:0 0 20px;font:600 11.5px/1 'Raleway',-apple-system,system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze)} .tab-tag{margin:0;font:500 clamp(3.2rem,5.6vw,5.8rem)/.98 'Cormorant Garamond',Georgia,serif;color:var(--ink);letter-spacing:-.012em; text-shadow:0 2px 30px rgba(7,7,10,.6)} .tab-tag em{display:block;font-style:italic;color:var(--bronze)} .tab-sub{margin:22px 0 0;font:400 17px/1.6 'Raleway',-apple-system,system-ui,sans-serif;color:var(--ink-dim)} .tab-foot{display:flex;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid rgba(240,235,226,.14); font:500 11px/1.4 'Raleway',-apple-system,system-ui,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint)} /* ---- the form side: parchment, the seal watermark from the home page ---- */ .tpe-auth-main{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;min-width:0; padding:clamp(56px,7vh,88px) max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); background:radial-gradient(70% 50% at 50% 0%,rgba(251,249,245,.9),transparent 70%),var(--paper);color:var(--text)} .tpe-auth-main::before{content:"";position:absolute;z-index:-1;right:-14%;bottom:-12%;width:min(78vh,620px);aspect-ratio:1; background:url(/images/web/seal-560.png) center/contain no-repeat;opacity:.05;pointer-events:none} .tpe-auth-main>.pew-credit{margin-top:auto} .tpe-auth-main>.pew-credit a{opacity:.8} .tpe-auth-main>.card,.tpe-auth-main>.authwrap{margin-top:auto} /* fields, buttons and links on parchment, both cards */ .tpe-auth .card,.tpe-auth .authcard{width:100%;max-width:440px;background:var(--card);color:var(--text);text-align:center;border:0} .tpe-auth .card form,.tpe-auth .authcard form{gap:16px;text-align:left} .tpe-auth .card .fl,.tpe-auth .authcard .field label{font:600 13px/1.3 'Raleway',-apple-system,system-ui,sans-serif;letter-spacing:.02em;color:var(--text-label)} .tpe-auth .card .fl{gap:8px} .tpe-auth .authcard .field{gap:8px} .tpe-auth .card input,.tpe-auth .authcard input:not([type=hidden]){min-height:56px;padding:0 20px;border-radius:16px; background:#F0EBE2;border:1px solid rgba(154,90,46,.14);color:var(--text);font:400 16px/1.2 'Raleway',-apple-system,system-ui,sans-serif; box-shadow:inset 0 1px 2px rgba(21,18,15,.05);transition:border-color .2s,box-shadow .2s,background-color .2s} .tpe-auth .card input:hover,.tpe-auth .authcard input:hover{border-color:rgba(154,90,46,.34)} .tpe-auth .card input:focus,.tpe-auth .authcard input:focus{outline:none;background:#FFFDF9;border-color:var(--bronze-deep);box-shadow:0 0 0 4px rgba(208,139,82,.2)} .tpe-auth .card input::placeholder,.tpe-auth .authcard input::placeholder{color:#8A8074} .tpe-auth .card button,.tpe-auth .authcard button[type=submit]{min-height:56px;width:100%;margin-top:6px;border:0;border-radius:999px; font:600 13px/1 'Cinzel',Georgia,serif;letter-spacing:.22em;text-transform:uppercase;cursor:pointer; transition:transform .2s,box-shadow .2s,filter .2s} .tpe-auth .card button:hover,.tpe-auth .authcard button[type=submit]:hover{transform:translateY(-1px);filter:brightness(1.08)} .tpe-auth .card button:focus-visible,.tpe-auth .authcard button:focus-visible{outline:2px solid var(--bronze-deep);outline-offset:3px} .tpe-auth .authcard .help{font-size:13.5px;color:var(--text-dim)} .tpe-auth .card .err,.tpe-auth .authcard .flash.is-err,.tpe-auth-check{width:100%;max-width:440px;margin:0;padding:12px 16px;text-align:left; border:1px solid rgba(178,59,32,.22);border-left:3px solid var(--ember);border-radius:12px;background:#F8E7E1;color:#8E2F19; font:500 14.5px/1.5 'Raleway',-apple-system,system-ui,sans-serif} .tpe-auth .card .err{margin-top:16px} .tpe-auth .authcard .flash.is-err{margin:0 0 16px;max-width:none} .tpe-auth .cf-turnstile{min-height:65px;margin-top:2px} .tpe-auth button,.tpe-auth [type=submit]{min-height:48px} .tpe-auth .foot a,.tpe-auth .links a{display:inline-flex;align-items:center;min-height:44px} /* ---- the member card (portal): the circle's dome, sealed with the wax seal from the home page ---- */ .tpe-auth .card{position:relative;max-width:440px;padding:96px 40px 30px; border-radius:50% 50% 28px 28px/120px 120px 28px 28px; box-shadow:inset 0 0 0 1px rgba(154,90,46,.14),0 2px 6px rgba(70,40,15,.06),0 44px 90px -36px rgba(70,40,15,.42)} .tpe-auth .card>img,.tpe-auth .card>.brand{display:none} .tpe-auth .card::before,.tpe-auth .card::after{content:"";position:absolute;left:50%;right:auto;top:-30px;width:88px;height:88px; margin-left:-44px;border-radius:50%;opacity:1} .tpe-auth .card::before{background:radial-gradient(circle at 32% 28%,#C85A33 0%,#B23B20 55%,#6E2110 100%); box-shadow:0 0 0 1px rgba(216,120,70,.35),inset 0 2px 4px rgba(255,255,255,.14),inset 0 -6px 10px rgba(0,0,0,.35),0 14px 26px -10px rgba(110,33,16,.65)} .tpe-auth .card::after{background:url(/images/web/monogram-white-200.png) center/44px no-repeat} .tpe-auth .card h1{font:500 2.6rem/1.04 'Cormorant Garamond',Georgia,serif;color:var(--text);letter-spacing:-.005em;margin:0 0 10px} .tpe-auth .card p.sub{font-size:15.5px;line-height:1.6;color:var(--text-dim);margin:0 auto 26px;max-width:32ch} .tpe-auth .card p.sub a{color:var(--bronze-deep)} .tpe-auth .card button{background:linear-gradient(180deg,#B06A3A 0%,#9A5A2E 100%);color:#FBF6EE; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 26px -12px rgba(154,90,46,.75)} .tpe-auth .card .links{margin-top:22px;padding-top:12px;border-top:1px solid var(--hair);align-items:center;gap:0} .tpe-auth .card .links a,.tpe-auth .card a.btn-link{justify-content:center;font:600 12px/1.2 'Raleway',-apple-system,system-ui,sans-serif; letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-deep)} .tpe-auth .card .links a:hover{color:var(--text)} .tpe-auth .card a.btn-link{display:flex;width:100%;min-height:52px;margin-top:14px;border:1px solid rgba(154,90,46,.4);border-radius:999px} .tpe-auth .card a.btn-link:hover{background:rgba(208,139,82,.1);color:var(--text)} /* ---- the back office card (admin): a plaque in a double gold frame, sealed with the diamond ---- */ .tpe-auth .authwrap{min-height:0;width:100%;padding:0;display:flex;justify-content:center;background:none} .tpe-auth .authwrap>*{width:100%;max-width:440px} .tpe-auth .authcard{position:relative;padding:84px 40px 30px;border-radius:4px; box-shadow:inset 0 0 0 1px rgba(201,168,76,.75),inset 0 0 0 7px var(--card),inset 0 0 0 8px rgba(201,168,76,.4), 0 2px 6px rgba(21,18,15,.08),0 44px 90px -36px rgba(21,18,15,.5)} .tpe-auth .authcard>img{display:none} .tpe-auth .authcard::before,.tpe-auth .authcard::after{content:"";position:absolute;left:50%;right:auto;top:-34px;width:68px;height:68px; margin-left:-34px;opacity:1} .tpe-auth .authcard::before{clip-path:var(--round);background:linear-gradient(135deg,#C9A84C,#7A6430 50%,#C9A84C); filter:drop-shadow(0 12px 18px rgba(21,18,15,.4))} .tpe-auth .authcard::after{top:-32px;width:64px;height:64px;margin-left:-32px;clip-path:var(--round); background:url(/images/web/monogram-bronze-240.png) center/30px no-repeat,linear-gradient(160deg,#1C1813,#07070A)} /* admin.css sets the card heading with !important, so this one needs it too */ .tpe-auth .authcard h1{font:500 2.5rem/1.04 'Cormorant Garamond',Georgia,serif!important;letter-spacing:-.005em;text-transform:none;color:var(--text);margin:0 0 10px} .tpe-auth .authcard .sub{font:400 15.5px/1.6 'Raleway',-apple-system,system-ui,sans-serif!important;color:var(--text-dim);margin:0 auto 26px;max-width:32ch} .tpe-auth .authcard .sub code{font-size:.85em;color:var(--text-label);background:#F0EBE2;padding:1px 5px;border-radius:4px} .tpe-auth .authcard button[type=submit]{background:linear-gradient(180deg,#1C1813 0%,#07070A 100%);color:#E2C878; box-shadow:inset 0 0 0 1px rgba(201,168,76,.4),0 14px 26px -12px rgba(7,7,10,.6)} .tpe-auth .authcard .foot{margin-top:22px;padding-top:12px;border-top:1px solid rgba(201,168,76,.32);font-size:14px;color:var(--text-dim)} .tpe-auth .authcard .foot a{justify-content:center;font:600 12px/1.2 'Raleway',-apple-system,system-ui,sans-serif;letter-spacing:.16em; text-transform:uppercase;color:var(--text);text-decoration:none} .tpe-auth .authcard .foot a:hover{color:#7A6430} /* the "I'm human" note after a failed check */ .tpe-auth-main>.tpe-auth-check{margin-top:auto} .tpe-auth-main>.tpe-auth-check+.card,.tpe-auth-main>.tpe-auth-check+.authwrap{margin-top:30px} /* ---- four looks, so each screen is told apart at a glance (app/auth_brand.php, tpe_auth_scene) ---- * member-in member sign in: warm bronze, three round photographs to the right, stars (the defaults below) * member-key member password: one great round photograph rising from the lower edge like the moon, the treeline in front * office-in back office sign in: cool gold, three diamond photographs, fine vertical lines, no stars * office-key back office password: the diamonds pushed up into the top corner on a darker panel */ .tpe-auth--member-in .tab-art i,.tpe-auth--member-key .tab-art i{border-radius:50%} .tpe-auth--member-in .tab-art i::after,.tpe-auth--member-key .tab-art i::after{border-radius:50%; box-shadow:inset 0 0 0 1px rgba(232,176,120,.5),inset 0 0 50px rgba(7,7,10,.55),0 40px 90px -30px rgba(0,0,0,.9),0 0 90px -24px rgba(208,139,82,.5)} .tpe-auth--member-in .tab-art i::before{inset:-16px;border-radius:50%;border:1px solid rgba(208,139,82,.34)} /* member sign in: three round photographs in a constellation above the words */ .tpe-auth--member-in .tpe-auth-brand{--bg:url(/images/web/signin-vehicle.jpg?v=3)} .tpe-auth--member-in .tpe-auth-brand::before{filter:brightness(.36) sepia(.55) saturate(1.2) contrast(1.1) blur(14px)} .tpe-auth--member-in .tab-art i:nth-child(1){--img:url(/images/web/signin-vehicle.jpg?v=3);width:min(58vh,68%);right:-14%;top:-5vh} .tpe-auth--member-in .tab-art i:nth-child(2){--img:url(/images/web/signin-figure.jpg?v=3);width:min(26vh,30%);left:max(28px,4.2vw);top:17vh} .tpe-auth--member-in .tab-art i:nth-child(2)::after{background-size:190%;background-position:38% 52%} .tpe-auth--member-in .tab-art i:nth-child(3){--img:url(/images/web/signin-scope.jpg?v=3);width:min(18vh,21%);right:3%;top:62vh} /* member password: one great round photograph rising like the home page's moon, the home page's treeline in front */ .tpe-auth--member-key .tpe-auth-brand{background:radial-gradient(120% 70% at 50% 0%,rgba(74,42,20,.22) 0%,transparent 60%), linear-gradient(180deg,#07070A 0%,#0C0B0A 45%,#07070A 100%)} .tpe-auth--member-key .tpe-auth-brand::before{display:none} .tpe-auth--member-key .tab-line{margin-top:clamp(28px,7vh,72px)} .tpe-auth--member-key .tab-foot{margin-top:auto;border-top:0} .tpe-auth--member-key .tab-tag{font-size:clamp(2.8rem,4.4vw,4.6rem)} .tpe-auth--member-key .tab-art::after{background:linear-gradient(0deg,rgba(7,7,10,.75) 0%,rgba(7,7,10,0) 14%)} .tpe-auth--member-key .tab-art i:nth-child(1){--img:url(/images/web/signin-scope.jpg?v=3);width:96vh;left:50%;top:52vh;margin-left:-44vh} .tpe-auth--member-key .tab-art i:nth-child(1)::after{filter:sepia(.75) saturate(1.25) brightness(.92) contrast(1.08);background-position:50% 20%; box-shadow:inset 0 0 0 1px rgba(232,176,120,.85),inset 0 0 90px rgba(7,7,10,.55),0 -2px 0 rgba(232,176,120,.3),0 -40px 140px -20px rgba(208,139,82,.6)} .tpe-auth--member-key .tab-art i:nth-child(2){width:150%;left:-25%;bottom:-1px;aspect-ratio:1440/320;filter:none;border-radius:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='xMidYMax slice'%3E%3Cpolygon fill='%230B0A09' points='0,320 0,180 18,200 28,160 40,185 55,145 70,170 85,140 100,165 115,138 128,160 140,130 155,155 168,128 182,150 195,125 210,148 225,122 240,145 255,120 268,142 280,118 295,140 310,115 322,138 335,112 348,135 360,110 375,133 388,108 400,130 415,105 428,128 440,102 455,125 468,100 480,122 495,98 508,120 520,95 535,118 548,92 560,115 575,90 588,112 600,88 615,110 628,85 640,108 655,82 668,105 680,80 695,102 708,78 720,100 735,75 748,98 760,72 775,95 788,70 800,92 815,68 828,90 840,65 855,88 868,62 880,85 895,60 908,82 920,58 935,80 948,55 960,78 975,52 988,75 1000,50 1015,72 1028,48 1040,70 1055,46 1068,68 1080,44 1095,66 1108,42 1120,64 1135,40 1148,62 1160,38 1175,60 1188,36 1200,58 1215,34 1228,56 1240,32 1255,54 1268,30 1280,52 1295,28 1308,50 1320,26 1335,48 1348,24 1360,46 1375,22 1388,44 1400,20 1415,42 1440,20 1440,320'/%3E%3Cpolygon fill='%2307070A' points='0,320 0,230 15,250 30,220 45,245 60,215 75,240 90,210 105,238 118,212 130,235 145,208 158,232 172,205 185,228 200,202 215,225 230,198 245,222 258,195 270,218 283,192 295,215 308,188 320,212 335,185 348,208 360,182 373,205 385,178 398,202 412,175 425,198 438,172 450,195 463,168 475,192 488,165 500,188 513,162 525,185 540,158 553,182 565,155 578,178 590,152 605,175 618,148 630,172 642,145 655,168 668,142 680,165 695,138 708,162 720,135 735,158 748,132 760,155 773,128 785,152 798,125 812,148 825,122 838,145 850,118 863,142 875,115 888,138 900,112 915,135 928,108 940,132 953,105 965,128 978,102 990,125 1003,98 1015,122 1028,95 1040,118 1053,92 1065,115 1078,88 1090,112 1103,85 1115,108 1128,82 1140,105 1153,78 1165,102 1178,75 1190,98 1203,72 1215,95 1228,68 1240,92 1253,65 1265,88 1278,62 1290,85 1303,58 1315,82 1328,55 1340,78 1353,52 1365,75 1378,48 1390,72 1405,45 1418,68 1440,45 1440,320'/%3E%3C/svg%3E") bottom/cover no-repeat} .tpe-auth--member-key .tab-art i:nth-child(2)::after,.tpe-auth--member-key .tab-art i:nth-child(2)::before, .tpe-auth--member-key .tab-art i:nth-child(3){display:none} /* back office sign in: three diamond photographs, the big one the screen with the crosshair (the code) */ .tpe-auth--office-in,.tpe-auth--office-key{--bronze:#C9A84C;--hair:rgba(201,168,76,.3)} .tpe-auth--office-in .tab-art::before,.tpe-auth--office-key .tab-art::before{opacity:1; background:repeating-linear-gradient(90deg,rgba(201,168,76,.06) 0 1px,transparent 1px 72px)} .tpe-auth--office-in .tab-art i::before,.tpe-auth--office-key .tab-art i::before{clip-path:var(--round); background:linear-gradient(135deg,rgba(201,168,76,.95),rgba(201,168,76,.35) 50%,rgba(201,168,76,.9))} .tpe-auth--office-in .tab-art i::after,.tpe-auth--office-key .tab-art i::after{inset:2px;clip-path:var(--round);filter:grayscale(.45) sepia(.3) contrast(1.08)} .tpe-auth--office-in .tab-mark span,.tpe-auth--office-key .tab-mark span{color:#D9C27A} .tpe-auth--office-in .tpe-auth-brand::before,.tpe-auth--office-key .tpe-auth-brand::before{filter:brightness(.26) grayscale(.6) sepia(.3) contrast(1.1) blur(2px)} .tpe-auth--office-in .tpe-auth-brand{--bg:url(/images/web/signin-vehicle.jpg?v=3)} .tpe-auth--office-in .tab-art i:nth-child(1){--img:url(/images/web/signin-thermal.jpg?v=3);width:min(60vh,70%);right:-16%;top:-4vh} .tpe-auth--office-in .tab-art i:nth-child(2){--img:url(/images/web/signin-scope.jpg?v=3);width:min(30vh,34%);left:max(16px,3vw);top:14vh} .tpe-auth--office-in .tab-art i:nth-child(3){--img:url(/images/web/signin-vehicle.jpg?v=3);width:min(20vh,23%);right:5%;top:60vh} /* back office password: the diamonds pushed up into the top corner on a darker panel */ .tpe-auth--office-key .tpe-auth-brand{--bg:url(/images/web/signin-vehicle.jpg?v=3)} .tpe-auth--office-key .tpe-auth-brand::before{filter:brightness(.22) grayscale(.7) sepia(.2) contrast(1.1) blur(10px)} .tpe-auth--office-key .tab-line{max-width:40rem} .tpe-auth--office-key .tab-tag{font-size:clamp(2.8rem,4.4vw,4.6rem)} .tpe-auth--office-key .tab-art i:nth-child(1){--img:url(/images/web/signin-scope.jpg?v=3);width:min(92vh,108%);right:-50%;top:-44vh} .tpe-auth--office-key .tab-art i:nth-child(1)::after{background-size:150%;background-position:20% 0;filter:grayscale(.45) sepia(.3) contrast(1.18) brightness(1.06)} .tpe-auth--office-key .tab-art i:nth-child(2){--img:url(/images/web/signin-vehicle.jpg?v=3);width:min(22vh,26%);left:24%;top:25vh} .tpe-auth--office-key .tab-art i:nth-child(3){--img:url(/images/web/signin-thermal.jpg?v=3);width:min(12vh,14%);left:14%;top:43vh} /* the form side's ground, one per look */ .tpe-auth--member-key .tpe-auth-main::before{right:auto;left:-16%} .tpe-auth--office-in .tpe-auth-main,.tpe-auth--office-key .tpe-auth-main{ background:repeating-linear-gradient(90deg,rgba(21,18,15,.035) 0 1px,transparent 1px 72px), radial-gradient(70% 50% at 50% 0%,rgba(251,249,245,.85),transparent 70%),#ECE8E0} .tpe-auth--office-key .tpe-auth-main{background:repeating-linear-gradient(90deg,rgba(21,18,15,.04) 0 1px,transparent 1px 72px), radial-gradient(70% 50% at 50% 100%,rgba(251,249,245,.7),transparent 70%),#E4DFD5} .tpe-auth--office-in .tpe-auth-main::before,.tpe-auth--office-key .tpe-auth-main::before{display:none} /* ---- tablets and phones: the panel becomes a band above the form, and the card rises into it ---- */ @media (max-width:880px){ .tpe-auth{grid-template-columns:1fr;grid-template-rows:auto 1fr} .tpe-auth-brand{gap:0;min-height:348px;justify-content:space-between; padding:max(22px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 92px max(20px,env(safe-area-inset-left))} .tab-line{max-width:64%} .tab-eyebrow{margin-bottom:12px;font-size:10.5px;letter-spacing:.26em} .tab-tag{font-size:clamp(2.3rem,10vw,3.2rem);line-height:.98} .tab-sub,.tab-foot{display:none} .tab-art::after{background:linear-gradient(90deg,rgba(7,7,10,.85) 0%,rgba(7,7,10,.45) 55%,rgba(7,7,10,0) 80%), linear-gradient(0deg,rgba(7,7,10,.6) 0%,rgba(7,7,10,0) 40%)} .tpe-auth-main{justify-content:flex-start;padding-top:0} .tpe-auth-main::before{width:420px;right:-160px;bottom:-60px} .tpe-auth-main>.card,.tpe-auth-main>.authwrap{position:relative;z-index:2;margin-top:-58px} .tpe-auth-main>.tpe-auth-check{margin-top:22px} .tpe-auth-main>.tpe-auth-check+.card,.tpe-auth-main>.tpe-auth-check+.authwrap{margin-top:40px} .tpe-auth--member-in .tab-art i:nth-child(1){width:210px;right:-50px;top:40px} .tpe-auth--member-in .tab-art i:nth-child(2){width:80px;left:calc(24px + 50vw);top:186px} .tpe-auth--member-in .tab-art i:nth-child(3){display:none} .tpe-auth--member-in .tab-art i::before{inset:-9px} .tpe-auth--member-key .tpe-auth-brand{min-height:392px;justify-content:flex-start} .tpe-auth--member-key .tab-line{max-width:none;margin-top:30px} .tpe-auth--member-key .tab-tag{font-size:clamp(1.9rem,8vw,2.3rem)} .tpe-auth--member-key .tab-art i:nth-child(1){width:500px;left:50%;top:262px;margin-left:-250px} .tpe-auth--member-key .tab-art i:nth-child(2){display:none} .tpe-auth--office-in .tab-art i:nth-child(1){width:210px;right:-40px;top:84px} .tpe-auth--office-in .tab-art i:nth-child(2){width:90px;left:auto;right:-15px;top:15px} .tpe-auth--office-in .tab-art i:nth-child(3){width:70px;right:115px;top:75px} .tpe-auth--office-key .tab-line{max-width:none} .tpe-auth--office-key .tab-tag{font-size:2rem} .tpe-auth--office-key .tab-art i:nth-child(1){width:360px;right:-170px;top:-170px} .tpe-auth--office-key .tab-art i:nth-child(2){width:60px;left:auto;right:14px;top:150px} .tpe-auth--office-key .tab-art i:nth-child(3){width:40px;left:auto;right:0;top:218px} } @media (max-width:480px){ .tpe-auth .card{padding:84px 22px 22px;border-radius:50% 50% 24px 24px/96px 96px 24px 24px} .tpe-auth .authcard{padding:72px 22px 22px} .tpe-auth .card h1{font-size:2.2rem} .tpe-auth .authcard h1{font-size:2.15rem!important} .tpe-auth-main{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))} } @media (prefers-reduced-motion:reduce){.tpe-auth *{transition:none!important;animation:none!important}}