/** * ดวงรายวัน — one card, one question at a time. * * The first version of this page put every field on the page at once and made * the reader scroll past all of it. This one asks the way a fortune teller * asks: your name, then your birthday, then what you want to know, each in * turn, in the same frame, with the witch watching from above. Nothing below * the card matters until there is something to read. * * All the light is CSS. The only images are the SVG drawings inlined in the * page, so there is nothing to download and nothing to go missing. */ /* Japanese needs a face that has the glyphs, and a little more line height to breathe; the switch sets a class on rather than a second stylesheet. */ body.ja { font-family: "Noto Sans JP", "IBM Plex Sans Thai", sans-serif; line-height: 1.9; } body.ja .q, body.ja .pick b, body.ja .slip-title, body.ja .verse, body.ja .title, body.ja .read h4 { font-family: "Noto Sans JP", sans-serif; } body.ja .verse { font-size: 16px; line-height: 2.1; } body.ja .slip-title { font-size: 22px; } body.ja .slip-no { font-size: 34px; font-family: "Noto Sans JP", sans-serif; } /* the language switch, top right */ .langs { position: fixed; right: 14px; top: 14px; z-index: 4; display: flex; gap: 6px; padding: 4px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(8,6,20,.66); backdrop-filter: blur(8px); } .lang { cursor: pointer; padding: 6px 13px; border: 0; border-radius: 999px; background: none; color: var(--dim); font: 500 12.5px var(--thai); transition: all .18s; } .lang:hover { color: var(--ink); } .lang.on { color: #06030e; background: linear-gradient(120deg, var(--cyan), var(--violet)); font-weight: 700; } :root { --void: #05030f; --ink: #f3f0ff; --dim: #9a95bb; --cyan: #5ee7ff; --violet: #a77bff; --gold: #ffd479; --rose: #ff7bb0; --edge: rgba(160, 140, 255, 0.22); --thai: "IBM Plex Sans Thai", "Noto Sans Thai", Tahoma, sans-serif; --display: "Orbitron", "IBM Plex Sans Thai", sans-serif; --script: "Charm", "IBM Plex Sans Thai", serif; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: var(--void); color: var(--ink); font: 400 16px/1.8 var(--thai); -webkit-text-size-adjust: 100%; overflow-x: hidden; } /* ------------------------------------------------------------------- sky */ .sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .aurora { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; } .a1 { background: radial-gradient(circle, rgba(94,231,255,.30), transparent 62%); top: -34vmax; left: -22vmax; animation: drift1 34s ease-in-out infinite alternate; } .a2 { background: radial-gradient(circle, rgba(167,123,255,.32), transparent 62%); bottom: -38vmax; right: -20vmax; animation: drift2 44s ease-in-out infinite alternate; } .a3 { background: radial-gradient(circle, rgba(255,123,176,.16), transparent 60%); top: 26%; left: 44%; animation: drift3 56s ease-in-out infinite alternate; } @keyframes drift1 { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.15); } } @keyframes drift2 { to { transform: translate3d(-12vmax, -12vmax, 0) scale(1.2); } } @keyframes drift3 { to { transform: translate3d(-18vmax, 8vmax, 0) scale(.85); } } .stars { position: absolute; inset: -50%; background-image: radial-gradient(1.4px 1.4px at 20% 30%, rgba(255,255,255,.9), transparent), radial-gradient(1.2px 1.2px at 70% 62%, rgba(190,220,255,.75), transparent), radial-gradient(1px 1px at 42% 78%, rgba(255,255,255,.6), transparent), radial-gradient(1.6px 1.6px at 86% 18%, rgba(255,235,200,.7), transparent); background-size: 260px 260px, 340px 340px, 200px 200px, 420px 420px; animation: twinkle 7s ease-in-out infinite alternate; } @keyframes twinkle { from { opacity: .45; } to { opacity: .85; } } /* ----------------------------------------------------------------- stage */ .home { position: fixed; left: 16px; top: 16px; z-index: 3; color: var(--dim); text-decoration: none; font-size: 13px; border: 1px solid var(--edge); border-radius: 999px; padding: 5px 12px; background: rgba(8,6,20,.6); backdrop-filter: blur(8px); } .home:hover { color: var(--cyan); border-color: rgba(94,231,255,.5); } .stage { position: relative; z-index: 1; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 66px 16px 24px; } /* Once there is a reading to read, the stage stops centring and lets it run. */ .stage.long { justify-content: flex-start; } /* the witch, above the card, lit from the ball she is leaning over */ .mascot { width: min(300px, 76vw); margin-bottom: -14px; filter: drop-shadow(0 18px 40px rgba(94,231,255,.18)); } .mascot .witch { width: 100%; height: auto; display: block; animation: bob 6s ease-in-out infinite alternate; } .mascot-fallback { display: none; font-size: 64px; text-align: center; } @keyframes bob { from { transform: translateY(-4px); } to { transform: translateY(6px); } } .title { margin: 4px 0 2px; text-align: center; font: 700 clamp(26px, 6vw, 38px)/1.25 var(--thai); letter-spacing: .02em; background: linear-gradient(96deg, var(--cyan), var(--violet) 46%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(120,120,255,.35)); } .sub { margin: 0 0 16px; text-align: center; color: var(--dim); font-size: 14px; min-height: 25px; } /* ------------------------------------------------------------------ card */ .card { position: relative; width: min(560px, 100%); padding: 26px 24px 24px; border: 1px solid var(--edge); border-radius: 22px; /* The sky behind is bright enough to swim through clear glass, which left the text sitting on top of a drifting blob. The card keeps its own dark under the blur so whatever is written on it stays readable. */ background: linear-gradient(160deg, rgba(18,14,42,.78), rgba(9,6,24,.82)); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); box-shadow: 0 26px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); /* A flex item shrinks by default, which cropped the reading at the fold as soon as it grew past the viewport. The card keeps its full height and the page scrolls instead. */ flex: none; } .card::before { content: ''; position: absolute; left: 26px; right: 26px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(94,231,255,.8), rgba(167,123,255,.8), transparent); } /* Only one step is ever on. The others are not merely hidden: they are taken out of the flow so the card's height is the height of the question being asked, and the card breathes as it goes along. */ .step { display: none; animation: stepIn .42s cubic-bezier(.2,.8,.2,1) both; } .step.on { display: block; } .step.back { animation-name: stepBack; } @keyframes stepIn { from { opacity: 0; transform: translateX(26px) scale(.98); } } @keyframes stepBack { from { opacity: 0; transform: translateX(-26px) scale(.98); } } .q { display: block; margin: 0 0 12px; font: 600 19px/1.6 var(--thai); } .tip { margin: 10px 0 0; color: var(--dim); font-size: 12.5px; line-height: 1.7; } input[type=text], input[type=date] { width: 100%; padding: 14px 16px; font: 400 17px var(--thai); color: var(--ink); background: rgba(8,6,20,.6); border: 1px solid var(--edge); border-radius: 14px; outline: none; transition: border-color .18s, box-shadow .18s, background .18s; } input::placeholder { color: rgba(154,149,187,.5); } input:focus { border-color: rgba(94,231,255,.7); box-shadow: 0 0 0 3px rgba(94,231,255,.14); background: rgba(10,8,26,.85); } /* วัน / เดือน / ปี พ.ศ., three boxes across */ .dob { display: grid; grid-template-columns: 0.8fr 1.2fr 1fr; gap: 10px; } .dob label { display: block; } .mini { display: block; margin: 0 0 5px; font-size: 12px; color: var(--dim); } .dob select { width: 100%; padding: 13px 12px; cursor: pointer; font: 400 16px var(--thai); color: var(--ink); background-color: rgba(8,6,20,.6); border: 1px solid var(--edge); border-radius: 14px; outline: none; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; transition: border-color .18s, box-shadow .18s; } .dob select:focus { border-color: rgba(94,231,255,.7); box-shadow: 0 0 0 3px rgba(94,231,255,.14); } /* the list itself is drawn by the OS, which does not inherit the page's dark */ .dob select option { background: #12102a; color: var(--ink); } @media (max-width: 460px) { .dob { grid-template-columns: 1fr 1fr; } .dob label:last-child { grid-column: 1 / -1; } } .row { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 18px; } .row.wrap { flex-wrap: wrap; justify-content: center; } .go { cursor: pointer; padding: 12px 26px; border: 0; border-radius: 999px; font: 700 15px var(--thai); color: #06030e; background: linear-gradient(110deg, var(--cyan), var(--violet) 55%, var(--rose)); box-shadow: 0 10px 28px rgba(94,231,255,.28); transition: transform .14s, filter .2s, opacity .2s; } .go:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); } .go:disabled { opacity: .4; cursor: not-allowed; } .ghost { cursor: pointer; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(255,255,255,.04); color: var(--dim); font: 400 14px var(--thai); transition: all .18s; } .ghost:hover { color: var(--cyan); border-color: rgba(94,231,255,.5); } /* ------------------------------------------------------------- the picks */ .picks { display: grid; gap: 12px; } .picks.two { grid-template-columns: 1fr 1fr; } @media (max-width: 460px) { .picks.two { grid-template-columns: 1fr; } } .pick { cursor: pointer; text-align: left; padding: 16px; border-radius: 16px; border: 1px solid var(--edge); background: rgba(255,255,255,.035); color: var(--ink); font: inherit; transition: border-color .2s, background .2s, transform .12s; } .pick:hover { transform: translateY(-2px); border-color: rgba(94,231,255,.5); } .pick b { display: block; font: 600 17px var(--thai); margin: 6px 0 3px; } .pick small { display: block; color: var(--dim); font-size: 12.5px; line-height: 1.6; } .pick-icon { font-size: 22px; } .pick.on { border-color: rgba(94,231,255,.75); background: linear-gradient(140deg, rgba(94,231,255,.16), rgba(167,123,255,.12)); box-shadow: 0 0 26px rgba(94,231,255,.16) inset; } .pick.sm { padding: 12px 14px; } .pick.sm b { margin-top: 0; font-size: 15px; } .suggests { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; } .tag { cursor: pointer; padding: 6px 13px; border-radius: 999px; border: 1px dashed rgba(167,123,255,.4); background: rgba(167,123,255,.07); color: var(--violet); font: 400 13px var(--thai); } .tag:hover { background: rgba(167,123,255,.16); color: var(--ink); } .spread { margin-top: 16px; } /* --------------------------------------------------------------- casting */ .casting { text-align: center; padding: 18px 0 6px; } .orb-wrap { position: relative; width: 190px; height: 190px; margin: 0 auto 18px; } .orb { position: absolute; inset: 22%; width: 56%; height: 56%; animation: orbPulse 1.6s ease-in-out infinite alternate; } .orb-wrap { width: 230px; height: 230px; } @keyframes orbPulse { from { transform: scale(.94); filter: drop-shadow(0 0 14px rgba(94,231,255,.5)); } to { transform: scale(1.06); filter: drop-shadow(0 0 34px rgba(167,123,255,.85)); } } /* the temple cylinder: shaken, until one stick works its way out and drops */ .tube-wrap { position: absolute; inset: 0; display: grid; place-items: center; } .tube { width: 108px; height: auto; transform-origin: 50% 88%; filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)); } .casting.go .tube { animation: shakeTube .38s ease-in-out 5; } @keyframes shakeTube { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-12deg) translateY(-10px); } 60% { transform: rotate(13deg) translateY(-5px); } } /* the one that falls: still until the shaking is nearly over, then out and down */ .fallen { position: absolute; left: 50%; top: 6%; width: 26px; height: auto; margin-left: -13px; opacity: 0; } .casting.go .fallen { animation: dropStick 1.9s ease-in 1.1s both; } @keyframes dropStick { 0% { opacity: 0; transform: translate(0, 0) rotate(-6deg); } 12% { opacity: 1; transform: translate(-6px, -26px) rotate(-14deg); } 55% { opacity: 1; transform: translate(-30px, 60px) rotate(-58deg); } 100% { opacity: 1; transform: translate(-38px, 108px) rotate(-86deg); } } /* the deck, fanned and riffled */ .fan-wrap { position: absolute; inset: 0; display: grid; place-items: center; } .fan { width: 176px; height: auto; filter: drop-shadow(0 12px 26px rgba(0,0,0,.5)); } .casting.go .fan { animation: riffle .5s ease-in-out 4; } @keyframes riffle { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-7deg) scale(1.06) translateX(-10px); } 70% { transform: rotate(6deg) scale(.97) translateX(12px); } } /* two rings of light turning opposite ways, the way a spell is always drawn */ .rune-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(94,231,255,.55); } .r1 { inset: 6%; border-width: 1.5px; animation: spin 5.5s linear infinite; } .r2 { inset: 16%; border-style: solid; border-color: rgba(167,123,255,.4); animation: spin 8s linear infinite reverse; } @keyframes spin { to { transform: rotate(360deg); } } .spark { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: fly 2.4s ease-in-out infinite; } .s1 { animation-delay: 0s; --a: 0deg; } .s2 { animation-delay: .3s; --a: 60deg; } .s3 { animation-delay: .6s; --a: 120deg; } .s4 { animation-delay: .9s; --a: 180deg; } .s5 { animation-delay: 1.2s; --a: 240deg; } .s6 { animation-delay: 1.5s; --a: 300deg; } @keyframes fly { 0% { transform: rotate(var(--a)) translateX(20px) scale(.4); opacity: 0; } 40% { opacity: 1; } 100% { transform: rotate(var(--a)) translateX(86px) scale(1); opacity: 0; } } .spell { color: var(--cyan); font-size: 17px; text-shadow: 0 2px 12px rgba(5,3,15,.9); animation: breathe 1.8s ease-in-out infinite alternate; } @keyframes breathe { from { opacity: .55; } to { opacity: 1; } } /* ---------------------------------------------------------------- result */ .asked { margin: 0 0 16px; color: var(--dim); font-size: 13px; text-align: center; } .asked b { color: var(--ink); font-weight: 600; } /* --- เซียมซี, printed as a slip ------------------------------------------ The picture that gets shared is cream paper inside a red temple frame, and the page used to show the same reading as dark glass panels: two different objects for one answer. This is the paper, on screen, so that what is read and what is sent are the same thing. */ .slip { margin: 4px -6px 0; padding: 22px 20px 18px; border-radius: 10px; background: linear-gradient(180deg, #faf4e4, #efe4cb); color: #3a2a1a; box-shadow: 0 18px 40px rgba(0,0,0,.5); position: relative; } /* the printed double rule the temple always runs round the edge */ .slip::before, .slip::after { content: ''; position: absolute; border: 1px solid #a51c2c; border-radius: 4px; pointer-events: none; } .slip::before { inset: 8px; border-width: 3px; } .slip::after { inset: 16px; opacity: .75; } .slip-inner { position: relative; padding: 8px 10px; } .slip-mark { text-align: center; color: #a51c2c; font: 700 17px var(--script); letter-spacing: .08em; } .slip-no { display: grid; place-items: center; width: 84px; height: 84px; margin: 10px auto 6px; border-radius: 50%; background: #a51c2c; color: #faf4e4; font: 700 40px/1 var(--script); box-shadow: 0 6px 18px rgba(165,28,44,.4); } .slip-grade { display: block; text-align: center; font: 600 16px var(--thai); } .g-great { color: #b8860b; } .g-good { color: #1f7a4d; } .g-fair { color: #6b5b3e; } .g-warn { color: #a02020; } .slip-title { margin: 6px 0 0; text-align: center; font: 700 26px var(--script); color: #3a2a1a; } .verse { margin: 14px 0 16px; text-align: center; font: 400 19px/2.05 var(--script); white-space: pre-line; color: #4a3722; } /* the rule with a lozenge, the way these are always divided */ .slip-rule { display: flex; align-items: center; gap: 10px; margin: 14px 2px; } .slip-rule::before, .slip-rule::after { content: ''; flex: 1; height: 1px; background: #c69a4a; } .slip-rule i { width: 11px; height: 11px; background: #c69a4a; transform: rotate(45deg); } .lines { display: grid; gap: 11px; } .line { display: grid; grid-template-columns: 108px 1fr; gap: 10px; font-size: 15px; line-height: 1.75; } .line b { color: #a51c2c; font: 700 14px var(--thai); } @media (max-width: 460px) { .line { grid-template-columns: 1fr; gap: 1px; } } .slip .advice { margin-top: 14px; padding: 13px 15px; border-radius: 8px; border: 1px solid rgba(165,28,44,.28); background: rgba(165,28,44,.06); } .slip .advice h4 { color: #a51c2c; } .slip .advice p { color: #3a2a1a; } .slip-foot { margin-top: 14px; text-align: center; color: #7a6748; font-size: 12.5px; line-height: 1.8; } /* --- the advice, which is the part people actually act on --- */ .advice { margin-top: 16px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(255,212,121,.3); background: linear-gradient(140deg, rgba(255,212,121,.12), rgba(255,123,176,.06)); } .advice h4 { margin: 0 0 6px; font: 600 15px var(--thai); color: var(--gold); } .advice p { margin: 0; font-size: 15px; } /* --- ไพ่ทาโรต์ ------------------------------------------------------------ Three cards are dealt as a hand, not as a row of three separate pictures: overlapping, each one offset far enough that the card behind still shows its own corner, the way a hand looks when it is held. It takes the room of a single card and keeps the three in their order — past, present, future, left to right, the last one on top. */ .cards { display: grid; justify-content: center; } .cards.single { grid-template-columns: minmax(0, 210px); } .cards.hand { position: relative; display: block; margin: 0 auto 10px; width: min(340px, 92vw); height: calc(min(196px, 54vw) * 1.66); } .cards.hand .tcard { position: absolute; top: 0; width: min(196px, 54vw); transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .3s; cursor: pointer; } /* Each card sits a third of a card to the right of the one behind it, and leans a little, so the fan reads as a fan and not as a mis-stack. */ .cards.hand .tcard:nth-child(1) { left: 0; transform: rotate(-8deg) translateY(12px); z-index: 1; } .cards.hand .tcard:nth-child(2) { left: 21%; transform: rotate(-1deg); z-index: 2; } .cards.hand .tcard:nth-child(3) { left: 42%; transform: rotate(7deg) translateY(10px); z-index: 3; } /* Tapping a card brings that one to the front so its face can be seen whole. It does not move: the hand stays in the order it was dealt — past, present, future — and only the stacking changes, the way a card is pulled forward in a hand without being taken out of it. */ .cards.hand .tcard:hover, .cards.hand .tcard.lift { z-index: 9; } .cards.hand .tcard.lift .face { box-shadow: 0 18px 36px rgba(0,0,0,.6), 0 0 0 2px rgba(94,231,255,.75), 0 0 30px rgba(94,231,255,.35); } /* The caption cannot sit under a card that has another card lying across it, so a fanned hand names its cards in the readings below instead. */ .cards.hand .cap { display: none; } .hand-note { margin: 0 0 14px; text-align: center; color: var(--dim); font-size: 12px; } .tcard { perspective: 1200px; } .tcard .inner { position: relative; width: 100%; aspect-ratio: 200 / 320; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.2,.8,.2,1); transform: rotateY(180deg); } .tcard.open .inner { transform: rotateY(0deg); } .tcard .face, .tcard .rear { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .tcard .rear { transform: rotateY(180deg); border: 1px solid rgba(167,123,255,.5); } .tcard .face { border: 1px solid rgba(94,231,255,.45); box-shadow: 0 14px 30px rgba(0,0,0,.5); } .tcard svg.art { display: block; width: 100%; height: 100%; background: #0b0722; } .tcard.rev svg.art { transform: rotate(180deg); } .tcard .cap { margin-top: 7px; text-align: center; } .tcard .cap b { display: block; font: 600 14px var(--thai); } .tcard .cap span { font-size: 11.5px; color: var(--dim); } .tcard .cap i { font-style: normal; font-size: 11px; color: var(--rose); } .tcard .pos-label { display: block; font-size: 11.5px; color: var(--cyan); letter-spacing: .05em; } .reads { display: grid; gap: 11px; margin-top: 16px; } .read { padding: 13px 15px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); } .read h4 { margin: 0 0 4px; font: 600 15px var(--thai); } .read h4 span { color: var(--dim); font-weight: 400; font-size: 12.5px; } .read p { margin: 0; font-size: 14.5px; } .summary { margin-top: 14px; padding: 13px 15px; border-radius: 14px; border: 1px solid rgba(167,123,255,.3); background: rgba(167,123,255,.08); font-size: 14px; } .summary b { color: var(--violet); } /* --------------------------------------------------- the colours, on ask */ .taksa { margin-top: 18px; animation: stepIn .4s both; } .taksa-top { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 13px 15px; border-radius: 14px; border: 1px solid rgba(94,231,255,.24); background: linear-gradient(120deg, rgba(94,231,255,.1), rgba(167,123,255,.08)); } .taksa-day { font: 600 17px var(--thai); } .taksa-day span { color: var(--cyan); } .taksa-meta { color: var(--dim); font-size: 13px; } .swatches { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; } .sw { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(255,255,255,.04); font-size: 12.5px; } .sw i { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); } .sw.good { border-color: rgba(126,227,164,.45); } .sw.bad { border-color: rgba(255,90,120,.5); background: rgba(255,60,100,.12); color: #ffc2cf; } .taksa-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13px; } .taksa-table th, .taksa-table td { padding: 6px 7px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); } .taksa-table th { color: var(--dim); font-weight: 400; font-size: 12px; } .taksa-table td:first-child { color: var(--gold); white-space: nowrap; } .taksa-table tr.bad td { color: #ffb3c4; } .taksa-table tr.bad td:first-child { color: #ff6f91; } .actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; justify-content: center; } /* --- sharing ------------------------------------------------------------ */ .share { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); } .share-head { margin: 0 0 10px; text-align: center; font: 600 14px var(--thai); color: var(--dim); } .share-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } @media (max-width: 460px) { .share-row { grid-template-columns: repeat(2, 1fr); } } .sh { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px; border-radius: 14px; border: 1px solid var(--edge); background: rgba(255,255,255,.04); color: var(--ink); font: 600 12.5px var(--thai); transition: transform .14s, border-color .2s, background .2s; } .sh span { font-size: 19px; } .sh:hover { transform: translateY(-2px); } .sh.ig:hover { border-color: #e1306c; background: rgba(225,48,108,.14); } .sh.line:hover { border-color: #06c755; background: rgba(6,199,85,.14); } .sh.fb:hover { border-color: #1877f2; background: rgba(24,119,242,.14); } .sh.save:hover { border-color: var(--cyan); background: rgba(94,231,255,.12); } .sh:disabled { opacity: .55; cursor: wait; } .share-note { margin: 10px 0 0; text-align: center; color: var(--dim); font-size: 11.5px; line-height: 1.7; } /* ------------------------------------------------------------ dots, foot */ .dots { display: flex; gap: 7px; margin-top: 18px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.16); transition: all .3s; } .dots i.on { background: linear-gradient(120deg, var(--cyan), var(--violet)); width: 22px; border-radius: 999px; } .dots i.done { background: rgba(94,231,255,.45); } .foot { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; padding: 6px 20px 40px; text-align: center; color: var(--dim); font-size: 12px; } .foot p { margin: 5px 0; } .tiny { font-size: 11.5px; opacity: .8; } .hidden { display: none !important; } @media (prefers-reduced-motion: reduce) { .aurora, .stars, .mascot .witch, .orb, .rune-ring, .spark, .spell { animation: none; } .step { animation: none; } .tcard .inner { transition: none; } }