face-age 2.4.16 → 2.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -6
- package/dist/faceage.css +2016 -180
- package/dist/faceage.js +1 -1
- package/package.json +1 -1
package/dist/faceage.css
CHANGED
|
@@ -1615,6 +1615,121 @@ body {
|
|
|
1615
1615
|
font-size: 88px;
|
|
1616
1616
|
margin-top: 40px;
|
|
1617
1617
|
}
|
|
1618
|
+
|
|
1619
|
+
/* ------------------------------------------------------------------
|
|
1620
|
+
Camera countdown, "hold still" ring and shutter (WebCamImage)
|
|
1621
|
+
------------------------------------------------------------------ */
|
|
1622
|
+
.face_age .fa-count,
|
|
1623
|
+
.face_age .fa-hold {
|
|
1624
|
+
position: relative;
|
|
1625
|
+
width: 104px;
|
|
1626
|
+
height: 104px;
|
|
1627
|
+
margin: 40px auto 0;
|
|
1628
|
+
}
|
|
1629
|
+
.face_age .fa-count svg,
|
|
1630
|
+
.face_age .fa-hold > svg {
|
|
1631
|
+
width: 100%;
|
|
1632
|
+
height: 100%;
|
|
1633
|
+
transform: rotate(-90deg);
|
|
1634
|
+
overflow: visible;
|
|
1635
|
+
}
|
|
1636
|
+
.face_age .fa-count__track,
|
|
1637
|
+
.face_age .fa-hold-track {
|
|
1638
|
+
fill: rgba(0, 0, 0, .28);
|
|
1639
|
+
stroke: rgba(255, 255, 255, .28);
|
|
1640
|
+
stroke-width: 6;
|
|
1641
|
+
}
|
|
1642
|
+
.face_age .fa-count__bar {
|
|
1643
|
+
fill: none;
|
|
1644
|
+
stroke: #fff;
|
|
1645
|
+
stroke-width: 6;
|
|
1646
|
+
stroke-linecap: round;
|
|
1647
|
+
stroke-dasharray: 100;
|
|
1648
|
+
stroke-dashoffset: 0;
|
|
1649
|
+
}
|
|
1650
|
+
.face_age .fa-count__num {
|
|
1651
|
+
position: absolute;
|
|
1652
|
+
inset: 0;
|
|
1653
|
+
display: flex;
|
|
1654
|
+
align-items: center;
|
|
1655
|
+
justify-content: center;
|
|
1656
|
+
color: #fff;
|
|
1657
|
+
font-size: 52px;
|
|
1658
|
+
font-weight: 700;
|
|
1659
|
+
line-height: 1;
|
|
1660
|
+
font-variant-numeric: tabular-nums;
|
|
1661
|
+
text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
|
|
1662
|
+
}
|
|
1663
|
+
.face_age .fa-count__ripple {
|
|
1664
|
+
position: absolute;
|
|
1665
|
+
inset: 0;
|
|
1666
|
+
border: 2px solid rgba(255, 255, 255, .9);
|
|
1667
|
+
border-radius: 50%;
|
|
1668
|
+
opacity: 0;
|
|
1669
|
+
pointer-events: none;
|
|
1670
|
+
}
|
|
1671
|
+
.face_age .fa-hold {
|
|
1672
|
+
transition: transform .25s ease;
|
|
1673
|
+
}
|
|
1674
|
+
.face_age .fa-hold-bar {
|
|
1675
|
+
fill: none;
|
|
1676
|
+
stroke: var(--accepted_status, #08d390);
|
|
1677
|
+
stroke-width: 6;
|
|
1678
|
+
stroke-linecap: round;
|
|
1679
|
+
stroke-dasharray: 100;
|
|
1680
|
+
stroke-dashoffset: 100;
|
|
1681
|
+
opacity: 0;
|
|
1682
|
+
transition: stroke-dashoffset .12s linear, opacity .15s;
|
|
1683
|
+
}
|
|
1684
|
+
.face_age .fa-hold-icon {
|
|
1685
|
+
position: absolute;
|
|
1686
|
+
inset: 0;
|
|
1687
|
+
display: flex;
|
|
1688
|
+
align-items: center;
|
|
1689
|
+
justify-content: center;
|
|
1690
|
+
color: #fff;
|
|
1691
|
+
}
|
|
1692
|
+
.face_age .fa-hold-icon svg {
|
|
1693
|
+
width: 40px;
|
|
1694
|
+
height: 40px;
|
|
1695
|
+
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
|
|
1696
|
+
}
|
|
1697
|
+
.face_age .fa-hold.is-moving {
|
|
1698
|
+
animation: faHoldPulse 1.1s ease-in-out infinite;
|
|
1699
|
+
}
|
|
1700
|
+
.face_age .fa-hold.is-moving .fa-hold-track {
|
|
1701
|
+
stroke: rgba(255, 255, 255, .75);
|
|
1702
|
+
}
|
|
1703
|
+
.face_age .fa-hold.is-still {
|
|
1704
|
+
transform: scale(1.06);
|
|
1705
|
+
}
|
|
1706
|
+
.face_age .fa-hold.is-done .fa-hold-track {
|
|
1707
|
+
fill: var(--accepted_status, #08d390);
|
|
1708
|
+
stroke: var(--accepted_status, #08d390);
|
|
1709
|
+
}
|
|
1710
|
+
.face_age .fa-hold.is-done .fa-hold-icon svg {
|
|
1711
|
+
width: 46px;
|
|
1712
|
+
height: 46px;
|
|
1713
|
+
}
|
|
1714
|
+
@keyframes faHoldPulse {
|
|
1715
|
+
0%, 100% { transform: scale(1); opacity: 1; }
|
|
1716
|
+
50% { transform: scale(.9); opacity: .7; }
|
|
1717
|
+
}
|
|
1718
|
+
/* white camera flash over the view at the moment of the shot */
|
|
1719
|
+
.fa-shutter-flash {
|
|
1720
|
+
position: absolute;
|
|
1721
|
+
inset: 0;
|
|
1722
|
+
z-index: 999;
|
|
1723
|
+
border-radius: 30px;
|
|
1724
|
+
background: #fff;
|
|
1725
|
+
opacity: 0;
|
|
1726
|
+
pointer-events: none;
|
|
1727
|
+
}
|
|
1728
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1729
|
+
.face_age .fa-hold.is-moving { animation: none; }
|
|
1730
|
+
.face_age .fa-hold,
|
|
1731
|
+
.face_age .fa-hold-bar { transition: none; }
|
|
1732
|
+
}
|
|
1618
1733
|
.face_age .faceController {
|
|
1619
1734
|
top: 0;
|
|
1620
1735
|
width: 100%;
|
|
@@ -1682,6 +1797,139 @@ body {
|
|
|
1682
1797
|
background: var(--circle_action);
|
|
1683
1798
|
margin-bottom: 10px;
|
|
1684
1799
|
}
|
|
1800
|
+
|
|
1801
|
+
/* ===== Control buttons on camera / upload / analysis preview (one look for all) =====
|
|
1802
|
+
Secondary (back, switch to upload / camera, flip camera, retake, skin info, refresh):
|
|
1803
|
+
48px circle, frosted --circle_action background, icon in --basic_action.
|
|
1804
|
+
Primary (confirm photo): same shape, --submit_action gradient, white icon.
|
|
1805
|
+
Circles sit 16px inside the 30px rounded camera / photo frame, so they follow its corners. */
|
|
1806
|
+
.face_age .faceAction {
|
|
1807
|
+
left: 16px;
|
|
1808
|
+
bottom: 16px;
|
|
1809
|
+
width: auto;
|
|
1810
|
+
display: flex;
|
|
1811
|
+
flex-direction: column;
|
|
1812
|
+
gap: 10px;
|
|
1813
|
+
overflow: visible;
|
|
1814
|
+
border-radius: 0;
|
|
1815
|
+
}
|
|
1816
|
+
[dir="rtl"] .face_age .faceAction {
|
|
1817
|
+
left: auto;
|
|
1818
|
+
right: 16px;
|
|
1819
|
+
}
|
|
1820
|
+
.face_age .faceActionSubmit,
|
|
1821
|
+
.face_age .faceAction_upload {
|
|
1822
|
+
display: flex;
|
|
1823
|
+
justify-content: flex-end;
|
|
1824
|
+
align-items: center;
|
|
1825
|
+
gap: 10px;
|
|
1826
|
+
right: 16px;
|
|
1827
|
+
bottom: 16px;
|
|
1828
|
+
height: auto;
|
|
1829
|
+
overflow: visible;
|
|
1830
|
+
border-radius: 0;
|
|
1831
|
+
}
|
|
1832
|
+
[dir="rtl"] .face_age .faceActionSubmit,
|
|
1833
|
+
[dir="rtl"] .face_age .faceAction_upload {
|
|
1834
|
+
right: auto;
|
|
1835
|
+
left: 16px;
|
|
1836
|
+
justify-content: flex-start;
|
|
1837
|
+
}
|
|
1838
|
+
.face_age .FaceIconButton-root.fa-ctl,
|
|
1839
|
+
.history-detail-page .FaceIconButton-root.fa-ctl {
|
|
1840
|
+
display: inline-flex;
|
|
1841
|
+
align-items: center;
|
|
1842
|
+
justify-content: center;
|
|
1843
|
+
box-sizing: border-box;
|
|
1844
|
+
width: 48px;
|
|
1845
|
+
height: 48px;
|
|
1846
|
+
margin: 0;
|
|
1847
|
+
padding: 0;
|
|
1848
|
+
border: 1px solid rgba(255, 255, 255, .7);
|
|
1849
|
+
border-radius: 50%;
|
|
1850
|
+
background: color-mix(in srgb, var(--circle_action) 90%, transparent);
|
|
1851
|
+
color: var(--basic_action);
|
|
1852
|
+
box-shadow: 0 6px 16px rgba(15, 23, 42, .16);
|
|
1853
|
+
-webkit-backdrop-filter: blur(8px);
|
|
1854
|
+
backdrop-filter: blur(8px);
|
|
1855
|
+
opacity: 1;
|
|
1856
|
+
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
|
|
1857
|
+
}
|
|
1858
|
+
.face_age .FaceIconButton-root.fa-ctl .FaceIconButton-label {
|
|
1859
|
+
display: inline-flex;
|
|
1860
|
+
}
|
|
1861
|
+
.face_age .FaceIconButton-root.fa-ctl:hover {
|
|
1862
|
+
opacity: 1;
|
|
1863
|
+
transform: translateY(-1px);
|
|
1864
|
+
background: var(--circle_action);
|
|
1865
|
+
box-shadow: 0 10px 22px rgba(15, 23, 42, .2);
|
|
1866
|
+
}
|
|
1867
|
+
.face_age .FaceIconButton-root.fa-ctl:active {
|
|
1868
|
+
transform: scale(.96);
|
|
1869
|
+
}
|
|
1870
|
+
.face_age .FaceIconButton-root.fa-ctl:focus-visible {
|
|
1871
|
+
outline: 3px solid color-mix(in srgb, var(--basic_action) 40%, transparent);
|
|
1872
|
+
outline-offset: 2px;
|
|
1873
|
+
}
|
|
1874
|
+
/* confirm photo */
|
|
1875
|
+
.face_age .FaceIconButton-root.fa-ctl.fa-ctl--primary {
|
|
1876
|
+
border: 0;
|
|
1877
|
+
background: linear-gradient(135deg,
|
|
1878
|
+
color-mix(in srgb, var(--submit_action) 80%, #fff) 0%,
|
|
1879
|
+
var(--submit_action) 55%,
|
|
1880
|
+
color-mix(in srgb, var(--submit_action) 85%, #000) 100%);
|
|
1881
|
+
color: #fff;
|
|
1882
|
+
box-shadow:
|
|
1883
|
+
0 8px 18px color-mix(in srgb, var(--submit_action) 35%, transparent),
|
|
1884
|
+
inset 0 1px 0 rgba(255, 255, 255, .3);
|
|
1885
|
+
}
|
|
1886
|
+
.face_age .FaceIconButton-root.fa-ctl.fa-ctl--primary.disable {
|
|
1887
|
+
background: #E5E7EB;
|
|
1888
|
+
color: #9CA3AF;
|
|
1889
|
+
box-shadow: none;
|
|
1890
|
+
cursor: not-allowed;
|
|
1891
|
+
}
|
|
1892
|
+
/* preview: retake (section / widget) and skin info, top right of the photo */
|
|
1893
|
+
.face_age .FaceIconButton-root.fa-ctl.backRepetition {
|
|
1894
|
+
position: absolute;
|
|
1895
|
+
top: 16px;
|
|
1896
|
+
right: 16px;
|
|
1897
|
+
}
|
|
1898
|
+
.face_age .FaceIconButton-root.fa-ctl.infoRepetition {
|
|
1899
|
+
position: absolute;
|
|
1900
|
+
top: 74px;
|
|
1901
|
+
right: 16px;
|
|
1902
|
+
}
|
|
1903
|
+
.face_age .FaceIconButton-root.fa-ctl.infoRepetition.is-top {
|
|
1904
|
+
top: 16px;
|
|
1905
|
+
}
|
|
1906
|
+
.face_age .FaceIconButton-root.fa-ctl[hidden] {
|
|
1907
|
+
display: none;
|
|
1908
|
+
}
|
|
1909
|
+
/* flip camera: the icon turns once */
|
|
1910
|
+
.face_age .FaceIconButton-root.fa-ctl.is-flipping svg {
|
|
1911
|
+
animation: fa-ctl-flip .5s cubic-bezier(.22, 1, .36, 1);
|
|
1912
|
+
}
|
|
1913
|
+
@keyframes fa-ctl-flip {
|
|
1914
|
+
from { transform: rotateY(0); }
|
|
1915
|
+
to { transform: rotateY(360deg); }
|
|
1916
|
+
}
|
|
1917
|
+
@media (hover: none) {
|
|
1918
|
+
.face_age .FaceIconButton-root.fa-ctl:hover {
|
|
1919
|
+
transform: none;
|
|
1920
|
+
background: color-mix(in srgb, var(--circle_action) 90%, transparent);
|
|
1921
|
+
}
|
|
1922
|
+
.face_age .FaceIconButton-root.fa-ctl.fa-ctl--primary:hover {
|
|
1923
|
+
background: linear-gradient(135deg,
|
|
1924
|
+
color-mix(in srgb, var(--submit_action) 80%, #fff) 0%,
|
|
1925
|
+
var(--submit_action) 55%,
|
|
1926
|
+
color-mix(in srgb, var(--submit_action) 85%, #000) 100%);
|
|
1927
|
+
}
|
|
1928
|
+
}
|
|
1929
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1930
|
+
.face_age .FaceIconButton-root.fa-ctl { transition: none; }
|
|
1931
|
+
.face_age .FaceIconButton-root.fa-ctl.is-flipping svg { animation: none; }
|
|
1932
|
+
}
|
|
1685
1933
|
.face_age .facePositionMap {
|
|
1686
1934
|
top: 0px;
|
|
1687
1935
|
left: 14%;
|
|
@@ -2487,6 +2735,17 @@ body {
|
|
|
2487
2735
|
}
|
|
2488
2736
|
}
|
|
2489
2737
|
|
|
2738
|
+
/* Modal: every quiz / analysis screen without a background of its own sits on the same
|
|
2739
|
+
soft gradient as the History screen (a background image or color set by the panel replaces it). */
|
|
2740
|
+
#faceAge-module-body.modal {
|
|
2741
|
+
background-color: var(--background);
|
|
2742
|
+
background-image:
|
|
2743
|
+
radial-gradient(ellipse 80% 50% at 20% 0%, color-mix(in srgb, var(--basic) 14%, transparent), transparent 55%),
|
|
2744
|
+
radial-gradient(ellipse 70% 45% at 90% 100%, color-mix(in srgb, var(--basic_action) 12%, transparent), transparent 50%),
|
|
2745
|
+
linear-gradient(165deg, color-mix(in srgb, var(--background) 92%, #fff) 0%, color-mix(in srgb, var(--background) 78%, #e8edf8) 100%);
|
|
2746
|
+
background-attachment: fixed;
|
|
2747
|
+
}
|
|
2748
|
+
|
|
2490
2749
|
/* History detail page (result + routines + products) */
|
|
2491
2750
|
#faceAge-module-body.widget:has(.history-detail-page),
|
|
2492
2751
|
#faceAge-module-body.modal:has(.history-detail-page) {
|
|
@@ -4139,9 +4398,10 @@ html:has(#faceAge-module-body.section) {
|
|
|
4139
4398
|
|
|
4140
4399
|
.history-detail-page .history-detail-embed .products {
|
|
4141
4400
|
display: grid;
|
|
4142
|
-
|
|
4401
|
+
/* phones: two products a row (three from 769px) */
|
|
4402
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
4143
4403
|
align-items: stretch;
|
|
4144
|
-
gap:
|
|
4404
|
+
gap: 12px;
|
|
4145
4405
|
margin: 0 0 10px;
|
|
4146
4406
|
}
|
|
4147
4407
|
|
|
@@ -4154,6 +4414,10 @@ html:has(#faceAge-module-body.section) {
|
|
|
4154
4414
|
}
|
|
4155
4415
|
|
|
4156
4416
|
@media (min-width: 769px) {
|
|
4417
|
+
.history-detail-page .history-detail-embed .products {
|
|
4418
|
+
gap: 15px;
|
|
4419
|
+
}
|
|
4420
|
+
|
|
4157
4421
|
.history-detail-page .history-detail-embed.history-detail-products-panel .products {
|
|
4158
4422
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
4159
4423
|
}
|
|
@@ -4242,7 +4506,7 @@ html:has(#faceAge-module-body.section) {
|
|
|
4242
4506
|
.history-detail-page .history-detail-embed .header_tools .download {
|
|
4243
4507
|
display: none !important;
|
|
4244
4508
|
}
|
|
4245
|
-
.history-detail-page .history-detail-back-actions .download {
|
|
4509
|
+
.history-detail-page .history-detail-back-actions .download:not(.fa-tb) {
|
|
4246
4510
|
display: inline-flex !important;
|
|
4247
4511
|
align-items: center;
|
|
4248
4512
|
cursor: pointer;
|
|
@@ -4251,7 +4515,7 @@ html:has(#faceAge-module-body.section) {
|
|
|
4251
4515
|
transition: background 0.2s ease;
|
|
4252
4516
|
}
|
|
4253
4517
|
|
|
4254
|
-
.history-detail-page .history-detail-back-actions .download:hover {
|
|
4518
|
+
.history-detail-page .history-detail-back-actions .download:not(.fa-tb):hover {
|
|
4255
4519
|
background: color-mix(in srgb, var(--basic) 10%, transparent);
|
|
4256
4520
|
}
|
|
4257
4521
|
|
|
@@ -4640,81 +4904,276 @@ html:has(#faceAge-module-body.section) {
|
|
|
4640
4904
|
text-align:right;
|
|
4641
4905
|
}
|
|
4642
4906
|
|
|
4643
|
-
|
|
4644
|
-
|
|
4645
|
-
|
|
4646
|
-
|
|
4647
|
-
|
|
4648
|
-
|
|
4649
|
-
|
|
4650
|
-
|
|
4651
|
-
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 14px 3px;
|
|
4907
|
+
/* SDK dialogs (errors, selfie tips, delete history item, email form): glass backdrop,
|
|
4908
|
+
rounded card, icon badge in the brand color; animated in / out by components/Modal.js */
|
|
4909
|
+
.modal_face_age.fa-dialog {
|
|
4910
|
+
padding: 16px;
|
|
4911
|
+
box-sizing: border-box;
|
|
4912
|
+
background: rgba(15, 23, 42, 0.38);
|
|
4913
|
+
-webkit-backdrop-filter: blur(6px);
|
|
4914
|
+
backdrop-filter: blur(6px);
|
|
4652
4915
|
}
|
|
4653
|
-
|
|
4654
|
-
|
|
4655
|
-
|
|
4656
|
-
|
|
4916
|
+
.modal_face_age.fa-dialog .modal_window {
|
|
4917
|
+
position: relative;
|
|
4918
|
+
width: 100%;
|
|
4919
|
+
max-width: 400px;
|
|
4920
|
+
max-height: calc(100% - 16px);
|
|
4921
|
+
display: flex;
|
|
4922
|
+
flex-direction: column;
|
|
4923
|
+
box-sizing: border-box;
|
|
4924
|
+
padding: 28px 24px 22px;
|
|
4925
|
+
border-radius: 24px;
|
|
4926
|
+
background: #fff;
|
|
4927
|
+
text-align: center;
|
|
4928
|
+
box-shadow:
|
|
4929
|
+
0 24px 60px rgba(15, 23, 42, 0.22),
|
|
4930
|
+
0 2px 6px rgba(15, 23, 42, 0.08);
|
|
4931
|
+
overflow: hidden;
|
|
4657
4932
|
}
|
|
4658
|
-
|
|
4659
|
-
|
|
4660
|
-
|
|
4661
|
-
|
|
4933
|
+
.modal_face_age.fa-dialog .modal_window::before {
|
|
4934
|
+
content: "";
|
|
4935
|
+
position: absolute;
|
|
4936
|
+
inset: 0 0 auto;
|
|
4937
|
+
height: 110px;
|
|
4938
|
+
pointer-events: none;
|
|
4939
|
+
background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--basic_action) 12%, transparent), transparent 70%);
|
|
4662
4940
|
}
|
|
4663
|
-
|
|
4664
|
-
|
|
4665
|
-
|
|
4941
|
+
.modal_face_age.fa-dialog .fa-dialog__icon {
|
|
4942
|
+
position: relative;
|
|
4943
|
+
display: inline-flex;
|
|
4944
|
+
align-items: center;
|
|
4945
|
+
justify-content: center;
|
|
4946
|
+
align-self: center;
|
|
4947
|
+
flex: 0 0 auto;
|
|
4948
|
+
width: 56px;
|
|
4949
|
+
height: 56px;
|
|
4950
|
+
margin-bottom: 14px;
|
|
4951
|
+
border-radius: 18px;
|
|
4952
|
+
color: var(--basic_action);
|
|
4953
|
+
background: color-mix(in srgb, var(--basic_action) 12%, #fff);
|
|
4954
|
+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--basic_action) 18%, transparent);
|
|
4666
4955
|
}
|
|
4667
|
-
|
|
4668
|
-
.
|
|
4669
|
-
|
|
4670
|
-
|
|
4956
|
+
.modal_face_age.fa-dialog--error .fa-dialog__icon,
|
|
4957
|
+
.modal_face_age.fa-dialog--delete .fa-dialog__icon {
|
|
4958
|
+
color: #DC2626;
|
|
4959
|
+
background: #FEF2F2;
|
|
4960
|
+
box-shadow: inset 0 0 0 1px #FECACA;
|
|
4671
4961
|
}
|
|
4672
|
-
|
|
4673
|
-
.
|
|
4674
|
-
|
|
4675
|
-
bottom: 0;
|
|
4676
|
-
left: 0;
|
|
4677
|
-
right: 0;
|
|
4962
|
+
.modal_face_age.fa-dialog--error .modal_window::before,
|
|
4963
|
+
.modal_face_age.fa-dialog--delete .modal_window::before {
|
|
4964
|
+
background: radial-gradient(120% 100% at 50% 0%, rgba(220, 38, 38, 0.08), transparent 70%);
|
|
4678
4965
|
}
|
|
4679
|
-
|
|
4680
|
-
|
|
4681
|
-
margin
|
|
4966
|
+
.modal_face_age.fa-dialog .modal_window .title {
|
|
4967
|
+
position: relative;
|
|
4968
|
+
margin: 0 0 8px;
|
|
4969
|
+
padding: 0;
|
|
4970
|
+
font-size: 18px;
|
|
4971
|
+
font-weight: 800;
|
|
4972
|
+
letter-spacing: -0.01em;
|
|
4973
|
+
color: #111827;
|
|
4974
|
+
text-align: center;
|
|
4682
4975
|
}
|
|
4683
|
-
|
|
4684
|
-
|
|
4685
|
-
|
|
4686
|
-
|
|
4687
|
-
max-
|
|
4688
|
-
|
|
4689
|
-
|
|
4690
|
-
border-radius: 15px;
|
|
4976
|
+
.modal_face_age.fa-dialog .modal_window .body {
|
|
4977
|
+
position: relative;
|
|
4978
|
+
flex: 1 1 auto;
|
|
4979
|
+
min-height: 0;
|
|
4980
|
+
max-height: none;
|
|
4981
|
+
padding: 0 2px;
|
|
4982
|
+
overflow-y: auto;
|
|
4691
4983
|
font-size: 14px;
|
|
4692
|
-
|
|
4693
|
-
|
|
4694
|
-
|
|
4984
|
+
line-height: 1.6;
|
|
4985
|
+
color: #4B5563;
|
|
4986
|
+
text-align: center;
|
|
4695
4987
|
}
|
|
4696
|
-
|
|
4697
|
-
.
|
|
4698
|
-
|
|
4699
|
-
|
|
4988
|
+
.modal_face_age.fa-dialog .modal_window .body ul,
|
|
4989
|
+
.modal_face_age.fa-dialog .modal_window .body ol {
|
|
4990
|
+
margin: 8px 0 0;
|
|
4991
|
+
padding-inline-start: 20px;
|
|
4992
|
+
text-align: start;
|
|
4700
4993
|
}
|
|
4701
|
-
|
|
4702
|
-
|
|
4703
|
-
max-width: 96px;
|
|
4994
|
+
.modal_face_age.fa-dialog .modal_window .body li + li {
|
|
4995
|
+
margin-top: 6px;
|
|
4704
4996
|
}
|
|
4705
|
-
|
|
4706
|
-
.
|
|
4707
|
-
|
|
4708
|
-
|
|
4709
|
-
|
|
4710
|
-
|
|
4711
|
-
|
|
4712
|
-
|
|
4997
|
+
/* selfie tips: one row per problem, with an icon */
|
|
4998
|
+
.modal_face_age.fa-dialog .modal_window .body ul.fa-tips {
|
|
4999
|
+
list-style: none;
|
|
5000
|
+
margin: 12px 0 0;
|
|
5001
|
+
padding: 0;
|
|
5002
|
+
display: flex;
|
|
5003
|
+
flex-direction: column;
|
|
5004
|
+
gap: 8px;
|
|
5005
|
+
text-align: start;
|
|
4713
5006
|
}
|
|
4714
|
-
|
|
4715
|
-
|
|
4716
|
-
|
|
4717
|
-
|
|
5007
|
+
.modal_face_age.fa-dialog .modal_window .body .fa-tips__item {
|
|
5008
|
+
display: flex;
|
|
5009
|
+
align-items: center;
|
|
5010
|
+
gap: 12px;
|
|
5011
|
+
margin: 0;
|
|
5012
|
+
padding: 10px 12px;
|
|
5013
|
+
border-radius: 14px;
|
|
5014
|
+
background: #F6F7F9;
|
|
5015
|
+
color: #374151;
|
|
5016
|
+
font-size: 14px;
|
|
5017
|
+
line-height: 1.4;
|
|
5018
|
+
}
|
|
5019
|
+
.modal_face_age.fa-dialog .modal_window .body .fa-tips__icon {
|
|
5020
|
+
flex: 0 0 auto;
|
|
5021
|
+
display: inline-flex;
|
|
5022
|
+
align-items: center;
|
|
5023
|
+
justify-content: center;
|
|
5024
|
+
width: 36px;
|
|
5025
|
+
height: 36px;
|
|
5026
|
+
border-radius: 11px;
|
|
5027
|
+
color: var(--basic_action);
|
|
5028
|
+
background: color-mix(in srgb, var(--basic_action) 12%, #fff);
|
|
5029
|
+
}
|
|
5030
|
+
.modal_face_age.fa-dialog .modal_window .body .fa-tips__icon svg {
|
|
5031
|
+
display: block;
|
|
5032
|
+
}
|
|
5033
|
+
.modal_face_age.fa-dialog .modal_window .body .fa-tips__text {
|
|
5034
|
+
flex: 1 1 auto;
|
|
5035
|
+
min-width: 0;
|
|
5036
|
+
}
|
|
5037
|
+
[dir="rtl"] .modal_face_age.fa-dialog .modal_window .body .fa-tips {
|
|
5038
|
+
text-align: right;
|
|
5039
|
+
}
|
|
5040
|
+
[dir="rtl"] .modal_face_age.fa-dialog .modal_window .title,
|
|
5041
|
+
[dir="rtl"] .modal_face_age.fa-dialog .modal_window .body {
|
|
5042
|
+
text-align: center;
|
|
5043
|
+
}
|
|
5044
|
+
.modal_face_age.fa-dialog .modal_window .action {
|
|
5045
|
+
position: relative;
|
|
5046
|
+
margin-top: 20px;
|
|
5047
|
+
}
|
|
5048
|
+
.modal_face_age.fa-dialog .modal_window .action .dZaMnF {
|
|
5049
|
+
display: flex;
|
|
5050
|
+
gap: 10px;
|
|
5051
|
+
}
|
|
5052
|
+
.modal_face_age.fa-dialog .modal_window .action .bLwrg {
|
|
5053
|
+
flex: 1 1 0;
|
|
5054
|
+
margin: 0;
|
|
5055
|
+
min-height: 48px;
|
|
5056
|
+
display: inline-flex;
|
|
5057
|
+
align-items: center;
|
|
5058
|
+
justify-content: center;
|
|
5059
|
+
border-radius: 14px;
|
|
5060
|
+
font-weight: 700;
|
|
5061
|
+
cursor: pointer;
|
|
5062
|
+
}
|
|
5063
|
+
.modal_face_age.fa-dialog .modal_window .action .bLwrg.accept {
|
|
5064
|
+
border: 0;
|
|
5065
|
+
background: linear-gradient(135deg,
|
|
5066
|
+
color-mix(in srgb, var(--basic_action) 82%, #fff) 0%,
|
|
5067
|
+
var(--basic_action) 55%,
|
|
5068
|
+
color-mix(in srgb, var(--basic_action) 85%, #000) 100%);
|
|
5069
|
+
color: var(--color_action, #fff);
|
|
5070
|
+
box-shadow: 0 6px 16px color-mix(in srgb, var(--basic_action) 28%, transparent);
|
|
5071
|
+
}
|
|
5072
|
+
.modal_face_age.fa-dialog--delete .modal_window .action .bLwrg.accept {
|
|
5073
|
+
background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
|
|
5074
|
+
color: #fff;
|
|
5075
|
+
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28);
|
|
5076
|
+
}
|
|
5077
|
+
.modal_face_age.fa-dialog .modal_window .action .bLwrg.cancel {
|
|
5078
|
+
border: 1.5px solid #E5E7EB;
|
|
5079
|
+
background: #fff;
|
|
5080
|
+
color: #374151;
|
|
5081
|
+
box-shadow: none;
|
|
5082
|
+
}
|
|
5083
|
+
.modal_face_age.fa-dialog .modal_window .action .bLwrg.cancel:hover {
|
|
5084
|
+
border-color: color-mix(in srgb, var(--basic_action) 40%, #E5E7EB);
|
|
5085
|
+
color: var(--basic_action);
|
|
5086
|
+
}
|
|
5087
|
+
.modal_face_age.fa-dialog .modal_window .action .bLwrg:focus-visible {
|
|
5088
|
+
outline: 3px solid color-mix(in srgb, var(--basic_action) 35%, transparent);
|
|
5089
|
+
outline-offset: 2px;
|
|
5090
|
+
}
|
|
5091
|
+
/* only one button (e.g. "Re-take" on an error): make it the main action */
|
|
5092
|
+
.modal_face_age.fa-dialog .modal_window .action .bLwrg.cancel:only-child {
|
|
5093
|
+
border: 0;
|
|
5094
|
+
background: linear-gradient(135deg,
|
|
5095
|
+
color-mix(in srgb, var(--basic_action) 82%, #fff) 0%,
|
|
5096
|
+
var(--basic_action) 55%,
|
|
5097
|
+
color-mix(in srgb, var(--basic_action) 85%, #000) 100%);
|
|
5098
|
+
color: var(--color_action, #fff);
|
|
5099
|
+
box-shadow: 0 6px 16px color-mix(in srgb, var(--basic_action) 28%, transparent);
|
|
5100
|
+
}
|
|
5101
|
+
|
|
5102
|
+
.form_window {
|
|
5103
|
+
background: #fff;
|
|
5104
|
+
width: 80%;
|
|
5105
|
+
max-width: 500px;
|
|
5106
|
+
margin: 25px auto;
|
|
5107
|
+
border-radius: 15px;
|
|
5108
|
+
font-size: 14px;
|
|
5109
|
+
text-align: left;
|
|
5110
|
+
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 14px 3px;
|
|
5111
|
+
}
|
|
5112
|
+
|
|
5113
|
+
.form_window .title {
|
|
5114
|
+
/* padding: 24px; */
|
|
5115
|
+
font-weight: bold;
|
|
5116
|
+
}
|
|
5117
|
+
|
|
5118
|
+
.form_window .elements {
|
|
5119
|
+
margin-bottom: 10px;
|
|
5120
|
+
padding: 12px;
|
|
5121
|
+
}
|
|
5122
|
+
|
|
5123
|
+
.form_window .body {
|
|
5124
|
+
padding: 2px 15px 19px;
|
|
5125
|
+
}
|
|
5126
|
+
|
|
5127
|
+
.face_age_form.widget .form_window {
|
|
5128
|
+
box-shadow: none;
|
|
5129
|
+
width: 100%;
|
|
5130
|
+
}
|
|
5131
|
+
|
|
5132
|
+
.face_age_form.widget .action {
|
|
5133
|
+
position: fixed;
|
|
5134
|
+
bottom: 0;
|
|
5135
|
+
left: 0;
|
|
5136
|
+
right: 0;
|
|
5137
|
+
}
|
|
5138
|
+
|
|
5139
|
+
.face_age_form .elements .action {
|
|
5140
|
+
margin-top: 24px !important;
|
|
5141
|
+
}
|
|
5142
|
+
|
|
5143
|
+
.info_window {
|
|
5144
|
+
background: #fff;
|
|
5145
|
+
width: 80%;
|
|
5146
|
+
max-width: 500px;
|
|
5147
|
+
margin: 10px auto;
|
|
5148
|
+
padding-top: 10px;
|
|
5149
|
+
border-radius: 15px;
|
|
5150
|
+
font-size: 14px;
|
|
5151
|
+
text-align: left;
|
|
5152
|
+
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 14px 3px;
|
|
5153
|
+
padding: 16px;
|
|
5154
|
+
}
|
|
5155
|
+
|
|
5156
|
+
.info_window .action {
|
|
5157
|
+
width: 90%;
|
|
5158
|
+
margin: 16px auto;
|
|
5159
|
+
}
|
|
5160
|
+
|
|
5161
|
+
.info_window .action .goToBack {
|
|
5162
|
+
max-width: 96px;
|
|
5163
|
+
}
|
|
5164
|
+
|
|
5165
|
+
.info_window .action .sc-1x1y2bq-3.disable,
|
|
5166
|
+
.face_age_info .action .sc-1x1y2bq-3.disable {
|
|
5167
|
+
border: 2px solid #a2a2a2;
|
|
5168
|
+
background: #a2a2a2;
|
|
5169
|
+
color: #f5f5f5;
|
|
5170
|
+
opacity: 0.6;
|
|
5171
|
+
cursor: not-allowed;
|
|
5172
|
+
}
|
|
5173
|
+
|
|
5174
|
+
.info_window .action .sc-1x1y2bq-3.disable:hover,
|
|
5175
|
+
.face_age_info .action .sc-1x1y2bq-3.disable:hover {
|
|
5176
|
+
background: #a2a2a2;
|
|
4718
5177
|
color: #f5f5f5;
|
|
4719
5178
|
opacity: 0.6;
|
|
4720
5179
|
}
|
|
@@ -4928,93 +5387,176 @@ html:has(#faceAge-module-body.section) {
|
|
|
4928
5387
|
.discount_banner {
|
|
4929
5388
|
--discount-color: var(--basic, rgb(239, 55, 134));
|
|
4930
5389
|
--discount-color-soft: color-mix(in srgb, var(--discount-color) 72%, #fff);
|
|
4931
|
-
--discount-border-color: var(--discount-color);
|
|
5390
|
+
--discount-border-color: color-mix(in srgb, var(--discount-color) 22%, #fff);
|
|
5391
|
+
position: relative;
|
|
4932
5392
|
display: flex;
|
|
4933
5393
|
flex-direction: column;
|
|
4934
5394
|
align-items: center;
|
|
5395
|
+
box-sizing: border-box;
|
|
4935
5396
|
width: 100%;
|
|
5397
|
+
overflow: hidden;
|
|
4936
5398
|
text-align: center;
|
|
4937
|
-
padding:
|
|
5399
|
+
padding: 26px 22px 22px;
|
|
4938
5400
|
border: 0 solid var(--discount-border-color);
|
|
4939
5401
|
border-radius: 24px;
|
|
4940
5402
|
background-color: #fff;
|
|
4941
5403
|
background-position: center;
|
|
4942
5404
|
background-repeat: no-repeat;
|
|
4943
5405
|
background-size: cover;
|
|
5406
|
+
box-shadow: none;
|
|
5407
|
+
}
|
|
5408
|
+
/* soft glow of the discount color behind the badge (hidden when the panel sets an image) */
|
|
5409
|
+
.discount_banner:not(.has-image)::before {
|
|
5410
|
+
content: "";
|
|
5411
|
+
position: absolute;
|
|
5412
|
+
inset: 0 0 auto;
|
|
5413
|
+
height: 140px;
|
|
5414
|
+
pointer-events: none;
|
|
5415
|
+
background: radial-gradient(90% 100% at 50% 0%, color-mix(in srgb, var(--discount-color) 14%, transparent), transparent 70%);
|
|
5416
|
+
}
|
|
5417
|
+
.discount_banner > * {
|
|
5418
|
+
position: relative;
|
|
4944
5419
|
}
|
|
4945
|
-
|
|
4946
5420
|
.discount_banner.has-border {
|
|
4947
|
-
border-width:
|
|
5421
|
+
border-width: 1.5px;
|
|
5422
|
+
}
|
|
5423
|
+
|
|
5424
|
+
.discount_banner_badge {
|
|
5425
|
+
display: inline-flex;
|
|
5426
|
+
align-items: center;
|
|
5427
|
+
justify-content: center;
|
|
5428
|
+
width: 48px;
|
|
5429
|
+
height: 48px;
|
|
5430
|
+
margin-bottom: 14px;
|
|
5431
|
+
border-radius: 16px;
|
|
5432
|
+
color: #fff;
|
|
5433
|
+
background: linear-gradient(135deg, color-mix(in srgb, var(--discount-color) 78%, #fff), var(--discount-color));
|
|
5434
|
+
box-shadow: 0 8px 18px color-mix(in srgb, var(--discount-color) 30%, transparent);
|
|
5435
|
+
transform: rotate(-8deg);
|
|
4948
5436
|
}
|
|
4949
5437
|
|
|
4950
5438
|
.discount_banner_headline {
|
|
4951
|
-
margin: 0 0
|
|
5439
|
+
margin: 0 0 8px;
|
|
4952
5440
|
max-width: 22em;
|
|
4953
|
-
color:
|
|
4954
|
-
font-size:
|
|
4955
|
-
font-weight:
|
|
5441
|
+
color: #111827;
|
|
5442
|
+
font-size: 20px;
|
|
5443
|
+
font-weight: 800;
|
|
5444
|
+
letter-spacing: -0.01em;
|
|
4956
5445
|
line-height: 1.3;
|
|
4957
5446
|
}
|
|
4958
5447
|
|
|
4959
5448
|
.discount_banner_body {
|
|
4960
5449
|
margin: 0;
|
|
4961
5450
|
max-width: 34em;
|
|
4962
|
-
color: #
|
|
4963
|
-
font-size:
|
|
5451
|
+
color: #4B5563;
|
|
5452
|
+
font-size: 14px;
|
|
4964
5453
|
font-weight: 400;
|
|
4965
|
-
line-height: 1.
|
|
5454
|
+
line-height: 1.55;
|
|
4966
5455
|
white-space: pre-line;
|
|
4967
5456
|
}
|
|
4968
5457
|
|
|
5458
|
+
/* the coupon ticket */
|
|
4969
5459
|
.discount_banner_code {
|
|
4970
|
-
display:
|
|
4971
|
-
align-items:
|
|
4972
|
-
|
|
5460
|
+
display: flex;
|
|
5461
|
+
align-items: center;
|
|
5462
|
+
gap: 12px;
|
|
5463
|
+
box-sizing: border-box;
|
|
5464
|
+
width: 100%;
|
|
5465
|
+
max-width: 380px;
|
|
4973
5466
|
margin: 20px 0 0;
|
|
4974
|
-
padding:
|
|
4975
|
-
|
|
4976
|
-
border:
|
|
4977
|
-
|
|
4978
|
-
|
|
4979
|
-
color: #fff;
|
|
5467
|
+
padding: 10px 10px 10px 18px;
|
|
5468
|
+
border: 2px dashed color-mix(in srgb, var(--discount-color) 45%, #fff);
|
|
5469
|
+
border-radius: 18px;
|
|
5470
|
+
background: color-mix(in srgb, var(--discount-color) 6%, #fff);
|
|
5471
|
+
color: #111827;
|
|
4980
5472
|
font: inherit;
|
|
5473
|
+
text-align: start;
|
|
4981
5474
|
cursor: pointer;
|
|
4982
5475
|
appearance: none;
|
|
4983
5476
|
-webkit-appearance: none;
|
|
5477
|
+
transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
|
|
5478
|
+
}
|
|
5479
|
+
[dir="rtl"] .discount_banner_code {
|
|
5480
|
+
padding: 10px 18px 10px 10px;
|
|
5481
|
+
}
|
|
5482
|
+
.discount_banner_code:hover {
|
|
5483
|
+
border-color: var(--discount-color);
|
|
5484
|
+
background: color-mix(in srgb, var(--discount-color) 10%, #fff);
|
|
5485
|
+
}
|
|
5486
|
+
.discount_banner_code:active {
|
|
5487
|
+
transform: scale(.985);
|
|
5488
|
+
}
|
|
5489
|
+
.discount_banner_code:focus-visible {
|
|
5490
|
+
outline: 3px solid color-mix(in srgb, var(--discount-color) 35%, transparent);
|
|
5491
|
+
outline-offset: 3px;
|
|
4984
5492
|
}
|
|
4985
5493
|
|
|
4986
|
-
.
|
|
4987
|
-
|
|
4988
|
-
|
|
4989
|
-
|
|
4990
|
-
|
|
4991
|
-
|
|
4992
|
-
color: #fff;
|
|
4993
|
-
line-height: 1.2;
|
|
4994
|
-
white-space: nowrap;
|
|
5494
|
+
.discount_banner_code_main {
|
|
5495
|
+
display: flex;
|
|
5496
|
+
flex-direction: column;
|
|
5497
|
+
gap: 3px;
|
|
5498
|
+
flex: 1 1 auto;
|
|
5499
|
+
min-width: 0;
|
|
4995
5500
|
}
|
|
4996
5501
|
|
|
4997
5502
|
.discount_banner_code_label {
|
|
4998
|
-
|
|
4999
|
-
font-size:
|
|
5000
|
-
font-weight:
|
|
5503
|
+
color: #6B7280;
|
|
5504
|
+
font-size: 11px;
|
|
5505
|
+
font-weight: 600;
|
|
5506
|
+
letter-spacing: .06em;
|
|
5507
|
+
text-transform: uppercase;
|
|
5508
|
+
line-height: 1.2;
|
|
5001
5509
|
}
|
|
5002
5510
|
|
|
5003
5511
|
.discount_banner_code_value {
|
|
5004
|
-
|
|
5005
|
-
|
|
5512
|
+
overflow: hidden;
|
|
5513
|
+
color: var(--discount-color);
|
|
5514
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
5515
|
+
font-size: 18px;
|
|
5516
|
+
font-weight: 800;
|
|
5517
|
+
letter-spacing: .12em;
|
|
5518
|
+
line-height: 1.2;
|
|
5519
|
+
text-overflow: ellipsis;
|
|
5520
|
+
white-space: nowrap;
|
|
5521
|
+
direction: ltr;
|
|
5522
|
+
unicode-bidi: isolate;
|
|
5523
|
+
}
|
|
5524
|
+
[dir="rtl"] .discount_banner_code_value {
|
|
5525
|
+
text-align: right;
|
|
5526
|
+
}
|
|
5527
|
+
|
|
5528
|
+
.discount_banner_copy {
|
|
5529
|
+
display: inline-flex;
|
|
5530
|
+
align-items: center;
|
|
5531
|
+
gap: 6px;
|
|
5532
|
+
flex: 0 0 auto;
|
|
5533
|
+
min-height: 40px;
|
|
5534
|
+
padding: 0 14px;
|
|
5535
|
+
border-radius: 12px;
|
|
5536
|
+
background: var(--discount-color);
|
|
5537
|
+
color: #fff;
|
|
5006
5538
|
font-size: 13px;
|
|
5007
5539
|
font-weight: 700;
|
|
5008
|
-
|
|
5540
|
+
white-space: nowrap;
|
|
5541
|
+
box-shadow: 0 4px 12px color-mix(in srgb, var(--discount-color) 28%, transparent);
|
|
5542
|
+
transition: background-color .2s ease, box-shadow .2s ease;
|
|
5543
|
+
}
|
|
5544
|
+
.discount_banner_copy_icon {
|
|
5545
|
+
display: inline-flex;
|
|
5009
5546
|
}
|
|
5010
5547
|
|
|
5011
|
-
.discount_banner_code.is-copied
|
|
5012
|
-
|
|
5548
|
+
.discount_banner_code.is-copied {
|
|
5549
|
+
border-color: #16A34A;
|
|
5550
|
+
background: #F0FDF4;
|
|
5551
|
+
}
|
|
5552
|
+
.discount_banner_code.is-copied .discount_banner_copy {
|
|
5553
|
+
background: #16A34A;
|
|
5554
|
+
box-shadow: 0 4px 12px rgba(22, 163, 74, .28);
|
|
5013
5555
|
}
|
|
5014
5556
|
|
|
5015
5557
|
@media (max-width: 768px) {
|
|
5016
5558
|
.discount_banner {
|
|
5017
|
-
padding: 22px
|
|
5559
|
+
padding: 22px 14px 16px;
|
|
5018
5560
|
border-radius: 20px;
|
|
5019
5561
|
}
|
|
5020
5562
|
|
|
@@ -5026,22 +5568,15 @@ html:has(#faceAge-module-body.section) {
|
|
|
5026
5568
|
font-size: 14px;
|
|
5027
5569
|
}
|
|
5028
5570
|
|
|
5029
|
-
.discount_banner_code {
|
|
5030
|
-
width: 100%;
|
|
5031
|
-
max-width: 340px;
|
|
5032
|
-
}
|
|
5033
|
-
|
|
5034
|
-
.discount_banner_code_label,
|
|
5035
5571
|
.discount_banner_code_value {
|
|
5036
|
-
|
|
5037
|
-
|
|
5038
|
-
padding: 10px 12px;
|
|
5572
|
+
font-size: 16px;
|
|
5573
|
+
letter-spacing: .08em;
|
|
5039
5574
|
}
|
|
5575
|
+
}
|
|
5040
5576
|
|
|
5041
|
-
|
|
5042
|
-
|
|
5043
|
-
|
|
5044
|
-
}
|
|
5577
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5578
|
+
.discount_banner_code,
|
|
5579
|
+
.discount_banner_copy { transition: none; }
|
|
5045
5580
|
}
|
|
5046
5581
|
|
|
5047
5582
|
.image_comparison {
|
|
@@ -5800,60 +6335,203 @@ html:has(#faceAge-module-body.section) {
|
|
|
5800
6335
|
margin: 28px 0 8px;
|
|
5801
6336
|
}
|
|
5802
6337
|
|
|
6338
|
+
/* Report download card: soft brand panel, a report illustration that floats, text, CTA */
|
|
5803
6339
|
.pdf_cta_card {
|
|
6340
|
+
--pdf-color: var(--basic_action, var(--basic));
|
|
5804
6341
|
position: relative;
|
|
5805
6342
|
display: flex;
|
|
5806
6343
|
flex-direction: column;
|
|
5807
6344
|
align-items: center;
|
|
6345
|
+
overflow: hidden;
|
|
6346
|
+
box-sizing: border-box;
|
|
5808
6347
|
text-align: center;
|
|
5809
|
-
padding:
|
|
6348
|
+
padding: 22px 20px 22px;
|
|
6349
|
+
border: 1px solid #EEF0F3;
|
|
6350
|
+
border-radius: 20px;
|
|
6351
|
+
background: linear-gradient(180deg, color-mix(in srgb, var(--pdf-color) 3%, #fff) 0%, #fff 100%);
|
|
5810
6352
|
}
|
|
5811
|
-
|
|
5812
|
-
.pdf_cta_copy {
|
|
6353
|
+
.pdf_cta_doc {
|
|
5813
6354
|
position: relative;
|
|
5814
|
-
|
|
5815
|
-
|
|
5816
|
-
|
|
5817
|
-
|
|
6355
|
+
width: 96px;
|
|
6356
|
+
height: 112px;
|
|
6357
|
+
margin: -14px 0 -8px;
|
|
6358
|
+
transform: scale(.72);
|
|
6359
|
+
animation: fa-pdf-float 5s ease-in-out infinite;
|
|
6360
|
+
}
|
|
6361
|
+
.pdf_cta_doc_back,
|
|
6362
|
+
.pdf_cta_doc_page {
|
|
6363
|
+
position: absolute;
|
|
6364
|
+
width: 76px;
|
|
6365
|
+
height: 96px;
|
|
6366
|
+
border-radius: 12px;
|
|
6367
|
+
background: #fff;
|
|
6368
|
+
}
|
|
6369
|
+
.pdf_cta_doc_back {
|
|
6370
|
+
left: 4px;
|
|
6371
|
+
top: 10px;
|
|
6372
|
+
transform: rotate(-10deg);
|
|
6373
|
+
background: color-mix(in srgb, var(--pdf-color) 16%, #fff);
|
|
6374
|
+
}
|
|
6375
|
+
.pdf_cta_doc_page {
|
|
6376
|
+
right: 4px;
|
|
6377
|
+
top: 4px;
|
|
6378
|
+
display: flex;
|
|
6379
|
+
flex-direction: column;
|
|
6380
|
+
gap: 6px;
|
|
6381
|
+
box-sizing: border-box;
|
|
6382
|
+
padding: 12px 11px;
|
|
6383
|
+
transform: rotate(5deg);
|
|
6384
|
+
box-shadow: 0 6px 16px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .06);
|
|
6385
|
+
}
|
|
6386
|
+
.pdf_cta_doc_head {
|
|
6387
|
+
width: 22px;
|
|
6388
|
+
height: 22px;
|
|
6389
|
+
border-radius: 7px;
|
|
6390
|
+
background: color-mix(in srgb, var(--pdf-color) 22%, #fff);
|
|
6391
|
+
}
|
|
6392
|
+
.pdf_cta_doc_line {
|
|
6393
|
+
height: 5px;
|
|
6394
|
+
border-radius: 3px;
|
|
6395
|
+
background: #E5E7EB;
|
|
6396
|
+
}
|
|
6397
|
+
.pdf_cta_doc_line.is-short {
|
|
6398
|
+
width: 65%;
|
|
6399
|
+
}
|
|
6400
|
+
.pdf_cta_doc_bars {
|
|
6401
|
+
display: flex;
|
|
6402
|
+
align-items: flex-end;
|
|
6403
|
+
gap: 4px;
|
|
6404
|
+
height: 18px;
|
|
6405
|
+
margin-top: 2px;
|
|
6406
|
+
}
|
|
6407
|
+
.pdf_cta_doc_bars i {
|
|
6408
|
+
flex: 1;
|
|
6409
|
+
border-radius: 2px;
|
|
6410
|
+
background: color-mix(in srgb, var(--pdf-color) 55%, #fff);
|
|
6411
|
+
}
|
|
6412
|
+
.pdf_cta_doc_bars i:nth-child(1) { height: 45%; }
|
|
6413
|
+
.pdf_cta_doc_bars i:nth-child(2) { height: 80%; background: var(--pdf-color); }
|
|
6414
|
+
.pdf_cta_doc_bars i:nth-child(3) { height: 60%; }
|
|
6415
|
+
.pdf_cta_doc_bars i:nth-child(4) { height: 100%; background: var(--pdf-color); }
|
|
6416
|
+
.pdf_cta_doc_tag {
|
|
6417
|
+
position: absolute;
|
|
6418
|
+
right: -10px;
|
|
6419
|
+
bottom: 10px;
|
|
6420
|
+
padding: 4px 7px;
|
|
6421
|
+
border-radius: 7px;
|
|
6422
|
+
background: var(--pdf-color);
|
|
6423
|
+
color: var(--color_action, #fff);
|
|
6424
|
+
font-size: 10px;
|
|
6425
|
+
font-weight: 800;
|
|
6426
|
+
letter-spacing: .06em;
|
|
6427
|
+
line-height: 1;
|
|
6428
|
+
}
|
|
6429
|
+
@keyframes fa-pdf-float {
|
|
6430
|
+
0%, 100% { transform: scale(.72) translateY(0); }
|
|
6431
|
+
50% { transform: scale(.72) translateY(-4px); }
|
|
6432
|
+
}
|
|
6433
|
+
|
|
6434
|
+
.pdf_cta_copy {
|
|
6435
|
+
position: relative;
|
|
6436
|
+
display: inline-block;
|
|
6437
|
+
max-width: 420px;
|
|
6438
|
+
}
|
|
6439
|
+
|
|
5818
6440
|
.pdf_cta_text {
|
|
5819
|
-
font-size:
|
|
5820
|
-
font-weight:
|
|
5821
|
-
line-height: 1.
|
|
5822
|
-
color: #
|
|
6441
|
+
font-size: 15px;
|
|
6442
|
+
font-weight: 600;
|
|
6443
|
+
line-height: 1.5;
|
|
6444
|
+
color: #374151;
|
|
5823
6445
|
white-space: pre-line;
|
|
5824
6446
|
}
|
|
5825
6447
|
|
|
6448
|
+
/* the hand-drawn arrow is replaced by the illustration */
|
|
5826
6449
|
.pdf_cta_arrow {
|
|
5827
|
-
|
|
5828
|
-
right: -72px;
|
|
5829
|
-
top: 8px;
|
|
5830
|
-
width: 86px;
|
|
5831
|
-
height: 94px;
|
|
5832
|
-
background: no-repeat center / contain url('./images/pdf-cta-arrow.svg');
|
|
5833
|
-
pointer-events: none;
|
|
6450
|
+
display: none;
|
|
5834
6451
|
}
|
|
5835
6452
|
|
|
5836
|
-
|
|
5837
|
-
|
|
5838
|
-
|
|
5839
|
-
|
|
6453
|
+
@media (prefers-reduced-motion: reduce) {
|
|
6454
|
+
.pdf_cta_doc { animation: none; }
|
|
6455
|
+
}
|
|
6456
|
+
|
|
6457
|
+
/* inside the card the CTA is quieter than product / routine actions */
|
|
6458
|
+
.pdf_cta_card .pdf_cta_button {
|
|
6459
|
+
min-height: 44px;
|
|
6460
|
+
margin-top: 16px;
|
|
6461
|
+
font-size: 14px;
|
|
6462
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
|
|
6463
|
+
}
|
|
6464
|
+
.pdf_cta_card .pdf_cta_button:hover {
|
|
6465
|
+
box-shadow: 0 6px 14px color-mix(in srgb, var(--pdf-color) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .24);
|
|
6466
|
+
}
|
|
6467
|
+
.pdf_cta_card .pdf_cta_button_icon {
|
|
6468
|
+
width: 28px;
|
|
6469
|
+
height: 28px;
|
|
5840
6470
|
}
|
|
5841
6471
|
|
|
6472
|
+
/* Result CTA (download the report): same feel as the quiz Next button */
|
|
5842
6473
|
.pdf_cta_button {
|
|
6474
|
+
display: inline-flex;
|
|
6475
|
+
align-items: center;
|
|
6476
|
+
justify-content: center;
|
|
6477
|
+
gap: 10px;
|
|
6478
|
+
max-width: 100%;
|
|
6479
|
+
min-height: 50px;
|
|
5843
6480
|
margin-top: 22px;
|
|
6481
|
+
white-space: nowrap;
|
|
6482
|
+
padding: 0 10px 0 24px;
|
|
5844
6483
|
border: 0;
|
|
5845
|
-
border-radius:
|
|
5846
|
-
background:
|
|
5847
|
-
|
|
5848
|
-
|
|
5849
|
-
|
|
6484
|
+
border-radius: 16px;
|
|
6485
|
+
background: linear-gradient(135deg,
|
|
6486
|
+
color-mix(in srgb, var(--basic_action, var(--basic)) 82%, #fff) 0%,
|
|
6487
|
+
var(--basic_action, var(--basic)) 55%,
|
|
6488
|
+
color-mix(in srgb, var(--basic_action, var(--basic)) 85%, #000) 100%);
|
|
6489
|
+
color: var(--color_action, #fff);
|
|
6490
|
+
font-size: 15px;
|
|
6491
|
+
font-weight: 700;
|
|
5850
6492
|
line-height: 1.2;
|
|
5851
|
-
padding: 12px 28px;
|
|
5852
6493
|
cursor: pointer;
|
|
6494
|
+
box-shadow:
|
|
6495
|
+
0 8px 20px color-mix(in srgb, var(--basic_action, var(--basic)) 30%, transparent),
|
|
6496
|
+
inset 0 1px 0 rgba(255, 255, 255, .28);
|
|
6497
|
+
transition: transform .2s ease, box-shadow .2s ease;
|
|
6498
|
+
}
|
|
6499
|
+
[dir="rtl"] .pdf_cta_button {
|
|
6500
|
+
padding: 0 24px 0 10px;
|
|
6501
|
+
}
|
|
6502
|
+
.pdf_cta_button_icon {
|
|
6503
|
+
display: inline-flex;
|
|
6504
|
+
align-items: center;
|
|
6505
|
+
justify-content: center;
|
|
6506
|
+
width: 32px;
|
|
6507
|
+
height: 32px;
|
|
6508
|
+
border-radius: 999px;
|
|
6509
|
+
background: rgba(255, 255, 255, .22);
|
|
6510
|
+
transition: transform .25s cubic-bezier(.22, 1, .36, 1);
|
|
5853
6511
|
}
|
|
5854
|
-
|
|
5855
6512
|
.pdf_cta_button:hover {
|
|
5856
|
-
|
|
6513
|
+
transform: translateY(-1px);
|
|
6514
|
+
box-shadow:
|
|
6515
|
+
0 12px 26px color-mix(in srgb, var(--basic_action, var(--basic)) 36%, transparent),
|
|
6516
|
+
inset 0 1px 0 rgba(255, 255, 255, .28);
|
|
6517
|
+
}
|
|
6518
|
+
.pdf_cta_button:hover .pdf_cta_button_icon {
|
|
6519
|
+
transform: translateY(2px);
|
|
6520
|
+
}
|
|
6521
|
+
.pdf_cta_button:active {
|
|
6522
|
+
transform: translateY(0) scale(.98);
|
|
6523
|
+
}
|
|
6524
|
+
.pdf_cta_button:focus-visible {
|
|
6525
|
+
outline: 3px solid color-mix(in srgb, var(--basic_action, var(--basic)) 35%, transparent);
|
|
6526
|
+
outline-offset: 3px;
|
|
6527
|
+
}
|
|
6528
|
+
/* while the PDF is being made the icon becomes a spinner in the text color */
|
|
6529
|
+
.pdf_cta_button.is-downloading .pdf_cta_button_icon {
|
|
6530
|
+
transform: none;
|
|
6531
|
+
}
|
|
6532
|
+
@media (prefers-reduced-motion: reduce) {
|
|
6533
|
+
.pdf_cta_button,
|
|
6534
|
+
.pdf_cta_button_icon { transition: none; }
|
|
5857
6535
|
}
|
|
5858
6536
|
|
|
5859
6537
|
.comments_container {
|
|
@@ -7059,6 +7737,102 @@ p.err {
|
|
|
7059
7737
|
background: var(--basic_action);
|
|
7060
7738
|
}
|
|
7061
7739
|
|
|
7740
|
+
/* Result screen main action ("Get recommended products!" / routine): like the quiz Next button */
|
|
7741
|
+
.problems_products button.recommended_products.fa-result-cta {
|
|
7742
|
+
position: relative;
|
|
7743
|
+
display: flex;
|
|
7744
|
+
align-items: center;
|
|
7745
|
+
gap: 12px;
|
|
7746
|
+
box-sizing: border-box;
|
|
7747
|
+
min-height: 56px;
|
|
7748
|
+
padding: 8px;
|
|
7749
|
+
overflow: hidden;
|
|
7750
|
+
border-radius: 18px;
|
|
7751
|
+
background: linear-gradient(135deg,
|
|
7752
|
+
color-mix(in srgb, var(--basic_action) 82%, #fff) 0%,
|
|
7753
|
+
var(--basic_action) 55%,
|
|
7754
|
+
color-mix(in srgb, var(--basic_action) 85%, #000) 100%);
|
|
7755
|
+
color: var(--color_action, #fff);
|
|
7756
|
+
font-size: 16px;
|
|
7757
|
+
font-weight: 700;
|
|
7758
|
+
line-height: 1.2;
|
|
7759
|
+
text-align: start;
|
|
7760
|
+
box-shadow:
|
|
7761
|
+
0 10px 24px color-mix(in srgb, var(--basic_action) 34%, transparent),
|
|
7762
|
+
inset 0 1px 0 rgba(255, 255, 255, .28);
|
|
7763
|
+
transition: transform .2s ease, box-shadow .2s ease;
|
|
7764
|
+
}
|
|
7765
|
+
/* a light sweep every few seconds so it reads as the next step */
|
|
7766
|
+
.problems_products button.recommended_products.fa-result-cta::after {
|
|
7767
|
+
content: "";
|
|
7768
|
+
position: absolute;
|
|
7769
|
+
top: 0;
|
|
7770
|
+
bottom: 0;
|
|
7771
|
+
left: -40%;
|
|
7772
|
+
width: 30%;
|
|
7773
|
+
pointer-events: none;
|
|
7774
|
+
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
|
|
7775
|
+
transform: skewX(-18deg);
|
|
7776
|
+
animation: fa-cta-shine 4.5s ease-in-out 1.2s infinite;
|
|
7777
|
+
}
|
|
7778
|
+
@keyframes fa-cta-shine {
|
|
7779
|
+
0% { left: -40%; }
|
|
7780
|
+
30%, 100% { left: 120%; }
|
|
7781
|
+
}
|
|
7782
|
+
.fa-result-cta__icon {
|
|
7783
|
+
display: inline-flex;
|
|
7784
|
+
align-items: center;
|
|
7785
|
+
justify-content: center;
|
|
7786
|
+
flex: 0 0 auto;
|
|
7787
|
+
width: 40px;
|
|
7788
|
+
height: 40px;
|
|
7789
|
+
border-radius: 999px;
|
|
7790
|
+
background: rgba(255, 255, 255, .18);
|
|
7791
|
+
}
|
|
7792
|
+
.fa-result-cta__label {
|
|
7793
|
+
flex: 1 1 auto;
|
|
7794
|
+
min-width: 0;
|
|
7795
|
+
}
|
|
7796
|
+
.fa-result-cta__arrow {
|
|
7797
|
+
display: inline-flex;
|
|
7798
|
+
align-items: center;
|
|
7799
|
+
justify-content: center;
|
|
7800
|
+
flex: 0 0 auto;
|
|
7801
|
+
width: 40px;
|
|
7802
|
+
height: 40px;
|
|
7803
|
+
border-radius: 999px;
|
|
7804
|
+
background: #fff;
|
|
7805
|
+
color: var(--basic_action);
|
|
7806
|
+
transition: transform .25s cubic-bezier(.22, 1, .36, 1);
|
|
7807
|
+
}
|
|
7808
|
+
[dir="rtl"] .fa-result-cta__arrow svg {
|
|
7809
|
+
transform: scaleX(-1);
|
|
7810
|
+
}
|
|
7811
|
+
.problems_products button.recommended_products.fa-result-cta:hover {
|
|
7812
|
+
transform: translateY(-1px);
|
|
7813
|
+
box-shadow:
|
|
7814
|
+
0 14px 28px color-mix(in srgb, var(--basic_action) 40%, transparent),
|
|
7815
|
+
inset 0 1px 0 rgba(255, 255, 255, .28);
|
|
7816
|
+
}
|
|
7817
|
+
.problems_products button.recommended_products.fa-result-cta:hover .fa-result-cta__arrow {
|
|
7818
|
+
transform: translateX(3px);
|
|
7819
|
+
}
|
|
7820
|
+
[dir="rtl"] .problems_products button.recommended_products.fa-result-cta:hover .fa-result-cta__arrow {
|
|
7821
|
+
transform: translateX(-3px);
|
|
7822
|
+
}
|
|
7823
|
+
.problems_products button.recommended_products.fa-result-cta:active {
|
|
7824
|
+
transform: translateY(0) scale(.98);
|
|
7825
|
+
}
|
|
7826
|
+
.problems_products button.recommended_products.fa-result-cta:focus-visible {
|
|
7827
|
+
outline: 3px solid color-mix(in srgb, var(--basic_action) 35%, transparent);
|
|
7828
|
+
outline-offset: 3px;
|
|
7829
|
+
}
|
|
7830
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7831
|
+
.problems_products button.recommended_products.fa-result-cta,
|
|
7832
|
+
.fa-result-cta__arrow { transition: none; }
|
|
7833
|
+
.problems_products button.recommended_products.fa-result-cta::after { animation: none; display: none; }
|
|
7834
|
+
}
|
|
7835
|
+
|
|
7062
7836
|
.loader_preview_image{
|
|
7063
7837
|
position: absolute;
|
|
7064
7838
|
top: 0;
|
|
@@ -7764,7 +8538,7 @@ p.err {
|
|
|
7764
8538
|
}
|
|
7765
8539
|
|
|
7766
8540
|
.pdf_cta_card {
|
|
7767
|
-
padding:
|
|
8541
|
+
padding: 20px 16px 20px;
|
|
7768
8542
|
}
|
|
7769
8543
|
|
|
7770
8544
|
.comment_item {
|
|
@@ -8740,41 +9514,41 @@ p.err {
|
|
|
8740
9514
|
box-shadow: 0 0 0 2px var(--basic) !important;
|
|
8741
9515
|
transform: translateY(-1px);
|
|
8742
9516
|
}
|
|
8743
|
-
.form_window .progress {
|
|
8744
|
-
margin: 10px 18px 18px;
|
|
9517
|
+
.form_window .progress.fa-steps {
|
|
8745
9518
|
display: flex;
|
|
8746
|
-
flex-direction: column;
|
|
8747
9519
|
align-items: center;
|
|
8748
|
-
gap:
|
|
8749
|
-
|
|
8750
|
-
.form_window .progress .step_indicator {
|
|
8751
|
-
font-size: 12px;
|
|
8752
|
-
color: #6B7280;
|
|
9520
|
+
gap: 10px;
|
|
9521
|
+
margin: 20px 24px 0;
|
|
8753
9522
|
}
|
|
8754
|
-
.form_window .progress .
|
|
8755
|
-
|
|
8756
|
-
gap: 6px;
|
|
8757
|
-
justify-content: center;
|
|
9523
|
+
.form_window .progress.fa-steps + .box_title .box_title-header {
|
|
9524
|
+
padding-top: 16px;
|
|
8758
9525
|
}
|
|
8759
|
-
.form_window .
|
|
8760
|
-
|
|
8761
|
-
|
|
8762
|
-
|
|
8763
|
-
background: #ffffff;
|
|
9526
|
+
.form_window .fa-steps__track {
|
|
9527
|
+
position: relative;
|
|
9528
|
+
flex: 1 1 auto;
|
|
9529
|
+
height: 4px;
|
|
8764
9530
|
border-radius: 999px;
|
|
8765
|
-
|
|
9531
|
+
background: color-mix(in srgb, var(--basic_action) 14%, #E5E7EB);
|
|
9532
|
+
overflow: hidden;
|
|
8766
9533
|
}
|
|
8767
|
-
.form_window .
|
|
9534
|
+
.form_window .fa-steps__fill {
|
|
9535
|
+
position: absolute;
|
|
9536
|
+
inset-block: 0;
|
|
9537
|
+
inset-inline-start: 0;
|
|
9538
|
+
border-radius: inherit;
|
|
8768
9539
|
background: var(--basic_action);
|
|
8769
|
-
|
|
8770
|
-
border-color: var(--basic_action);
|
|
9540
|
+
transition: width .5s cubic-bezier(.22, 1, .36, 1);
|
|
8771
9541
|
}
|
|
8772
|
-
.form_window .
|
|
8773
|
-
|
|
8774
|
-
|
|
8775
|
-
|
|
8776
|
-
|
|
8777
|
-
|
|
9542
|
+
.form_window .fa-steps__count {
|
|
9543
|
+
flex: 0 0 auto;
|
|
9544
|
+
font-size: 12px;
|
|
9545
|
+
font-weight: 600;
|
|
9546
|
+
line-height: 1;
|
|
9547
|
+
font-variant-numeric: tabular-nums;
|
|
9548
|
+
color: #6B7280;
|
|
9549
|
+
}
|
|
9550
|
+
@media (prefers-reduced-motion: reduce) {
|
|
9551
|
+
.form_window .fa-steps__fill { transition: none; }
|
|
8778
9552
|
}
|
|
8779
9553
|
.form_window .action {
|
|
8780
9554
|
padding: 0 0 18px;
|
|
@@ -8790,8 +9564,1070 @@ p.err {
|
|
|
8790
9564
|
.form_window .action .bLwrg.outline {
|
|
8791
9565
|
flex: 0 0 auto;
|
|
8792
9566
|
}
|
|
8793
|
-
|
|
8794
|
-
|
|
8795
|
-
|
|
8796
|
-
|
|
9567
|
+
|
|
9568
|
+
/* Quiz buttons: Back (round icon), Next (brand, arrow), Skip (quiet, double chevron) */
|
|
9569
|
+
:is(.form_window, .info_window) .action .fa-qbtn {
|
|
9570
|
+
display: inline-flex;
|
|
9571
|
+
align-items: center;
|
|
9572
|
+
justify-content: center;
|
|
9573
|
+
gap: 8px;
|
|
9574
|
+
min-height: 48px;
|
|
9575
|
+
box-sizing: border-box;
|
|
9576
|
+
font-weight: 700;
|
|
9577
|
+
line-height: 1;
|
|
9578
|
+
cursor: pointer;
|
|
9579
|
+
user-select: none;
|
|
9580
|
+
-webkit-tap-highlight-color: transparent;
|
|
9581
|
+
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
|
|
9582
|
+
}
|
|
9583
|
+
:is(.form_window, .info_window) .action .fa-qbtn:focus-visible {
|
|
9584
|
+
outline: 3px solid color-mix(in srgb, var(--basic_action) 35%, transparent);
|
|
9585
|
+
outline-offset: 2px;
|
|
9586
|
+
}
|
|
9587
|
+
:is(.form_window, .info_window) .action .fa-qbtn__icon {
|
|
9588
|
+
display: inline-flex;
|
|
9589
|
+
flex: 0 0 auto;
|
|
9590
|
+
transition: transform .25s cubic-bezier(.22, 1, .36, 1);
|
|
9591
|
+
}
|
|
9592
|
+
[dir="rtl"] :is(.form_window, .info_window) .action .fa-qbtn__icon svg {
|
|
9593
|
+
transform: scaleX(-1);
|
|
9594
|
+
}
|
|
9595
|
+
|
|
9596
|
+
/* Next: brand gradient, soft tinted shadow, arrow moves forward on hover */
|
|
9597
|
+
:is(.form_window, .info_window) .action .bLwrg.fa-qbtn--next {
|
|
9598
|
+
position: relative;
|
|
9599
|
+
overflow: hidden;
|
|
9600
|
+
border: 0;
|
|
9601
|
+
border-radius: 16px;
|
|
9602
|
+
padding: 0 20px;
|
|
9603
|
+
background: linear-gradient(135deg,
|
|
9604
|
+
color-mix(in srgb, var(--basic_action) 82%, #fff) 0%,
|
|
9605
|
+
var(--basic_action) 55%,
|
|
9606
|
+
color-mix(in srgb, var(--basic_action) 85%, #000) 100%);
|
|
9607
|
+
color: var(--color_action, #fff);
|
|
9608
|
+
box-shadow:
|
|
9609
|
+
0 6px 16px color-mix(in srgb, var(--basic_action) 28%, transparent),
|
|
9610
|
+
inset 0 1px 0 rgba(255, 255, 255, .28);
|
|
9611
|
+
}
|
|
9612
|
+
:is(.form_window, .info_window) .action .bLwrg.fa-qbtn--next .fa-qbtn__icon {
|
|
9613
|
+
width: 26px;
|
|
9614
|
+
height: 26px;
|
|
9615
|
+
margin-inline-end: -8px;
|
|
9616
|
+
align-items: center;
|
|
9617
|
+
justify-content: center;
|
|
9618
|
+
border-radius: 999px;
|
|
9619
|
+
background: rgba(255, 255, 255, .2);
|
|
9620
|
+
}
|
|
9621
|
+
:is(.form_window, .info_window) .action .bLwrg.fa-qbtn--next:hover {
|
|
9622
|
+
transform: translateY(-1px);
|
|
9623
|
+
box-shadow:
|
|
9624
|
+
0 10px 22px color-mix(in srgb, var(--basic_action) 34%, transparent),
|
|
9625
|
+
inset 0 1px 0 rgba(255, 255, 255, .28);
|
|
9626
|
+
}
|
|
9627
|
+
:is(.form_window, .info_window) .action .bLwrg.fa-qbtn--next:hover .fa-qbtn__icon {
|
|
9628
|
+
transform: translateX(3px);
|
|
9629
|
+
}
|
|
9630
|
+
[dir="rtl"] :is(.form_window, .info_window) .action .bLwrg.fa-qbtn--next:hover .fa-qbtn__icon {
|
|
9631
|
+
transform: translateX(-3px);
|
|
9632
|
+
}
|
|
9633
|
+
:is(.form_window, .info_window) .action .bLwrg.fa-qbtn--next:active {
|
|
9634
|
+
transform: translateY(0) scale(.98);
|
|
9635
|
+
}
|
|
9636
|
+
/* Disabled until an answer is picked: quiet grey, no shadow */
|
|
9637
|
+
:is(.form_window, .info_window) .action .bLwrg.fa-qbtn--next.disabale {
|
|
9638
|
+
opacity: 1;
|
|
9639
|
+
background: #E5E7EB;
|
|
9640
|
+
border: 0;
|
|
9641
|
+
color: #9CA3AF;
|
|
9642
|
+
box-shadow: none;
|
|
9643
|
+
}
|
|
9644
|
+
:is(.form_window, .info_window) .action .bLwrg.fa-qbtn--next.disabale .fa-qbtn__icon {
|
|
9645
|
+
background: rgba(255, 255, 255, .7);
|
|
9646
|
+
}
|
|
9647
|
+
|
|
9648
|
+
/* Instructions use the same 24px side spacing as the quiz card */
|
|
9649
|
+
.face_age_info .info_window:not(.history_info_window) {
|
|
9650
|
+
padding-left: 24px;
|
|
9651
|
+
padding-right: 24px;
|
|
9652
|
+
}
|
|
9653
|
+
.face_age_info .info_window:not(.history_info_window) .action {
|
|
9654
|
+
width: 100%;
|
|
9655
|
+
margin-left: 0;
|
|
9656
|
+
margin-right: 0;
|
|
9657
|
+
}
|
|
9658
|
+
.face_age_info .info_window:not(.history_info_window) .privacy {
|
|
9659
|
+
width: 100%;
|
|
9660
|
+
max-width: none;
|
|
9661
|
+
}
|
|
9662
|
+
|
|
9663
|
+
/* Instructions: Start is disabled (.disable) until consent is given */
|
|
9664
|
+
.info_window .action .bLwrg.fa-qbtn--next {
|
|
9665
|
+
flex: 1 1 auto;
|
|
9666
|
+
width: auto;
|
|
9667
|
+
min-height: 48px;
|
|
9668
|
+
}
|
|
9669
|
+
.info_window .action .bLwrg.fa-qbtn--next.disable,
|
|
9670
|
+
.info_window .action .bLwrg.fa-qbtn--next.disable:hover {
|
|
9671
|
+
opacity: 1;
|
|
9672
|
+
transform: none;
|
|
9673
|
+
border: 0;
|
|
9674
|
+
background: #E5E7EB;
|
|
9675
|
+
color: #9CA3AF;
|
|
9676
|
+
box-shadow: none;
|
|
9677
|
+
}
|
|
9678
|
+
.info_window .action .bLwrg.fa-qbtn--next.disable .fa-qbtn__icon {
|
|
9679
|
+
transform: none;
|
|
9680
|
+
background: rgba(255, 255, 255, .7);
|
|
9681
|
+
}
|
|
9682
|
+
|
|
9683
|
+
/* Back: round icon button, the label stays for screen readers */
|
|
9684
|
+
:is(.form_window, .info_window) .action .bLwrg.fa-qbtn--back {
|
|
9685
|
+
width: 48px;
|
|
9686
|
+
height: 48px;
|
|
9687
|
+
padding: 0;
|
|
9688
|
+
border-radius: 16px;
|
|
9689
|
+
border: 1.5px solid color-mix(in srgb, var(--basic_action) 30%, #E5E7EB);
|
|
9690
|
+
background: color-mix(in srgb, var(--basic_action) 6%, #fff);
|
|
9691
|
+
color: var(--basic_action);
|
|
9692
|
+
box-shadow: none;
|
|
9693
|
+
}
|
|
9694
|
+
:is(.form_window, .info_window) .action .bLwrg.fa-qbtn--back .fa-qbtn__label {
|
|
9695
|
+
position: absolute;
|
|
9696
|
+
width: 1px;
|
|
9697
|
+
height: 1px;
|
|
9698
|
+
overflow: hidden;
|
|
9699
|
+
clip: rect(0 0 0 0);
|
|
9700
|
+
white-space: nowrap;
|
|
9701
|
+
}
|
|
9702
|
+
:is(.form_window, .info_window) .action .bLwrg.fa-qbtn--back:hover {
|
|
9703
|
+
transform: none;
|
|
9704
|
+
background: color-mix(in srgb, var(--basic_action) 12%, #fff);
|
|
9705
|
+
border-color: var(--basic_action);
|
|
9706
|
+
}
|
|
9707
|
+
:is(.form_window, .info_window) .action .bLwrg.fa-qbtn--back:hover .fa-qbtn__icon {
|
|
9708
|
+
transform: translateX(-3px);
|
|
9709
|
+
}
|
|
9710
|
+
[dir="rtl"] :is(.form_window, .info_window) .action .bLwrg.fa-qbtn--back:hover .fa-qbtn__icon {
|
|
9711
|
+
transform: translateX(3px);
|
|
9712
|
+
}
|
|
9713
|
+
|
|
9714
|
+
/* Instructions: Back keeps its 48px square next to the full-width Get Started */
|
|
9715
|
+
.info_window .action .bLwrg.fa-qbtn--back {
|
|
9716
|
+
flex: 0 0 48px;
|
|
9717
|
+
max-width: 48px;
|
|
9718
|
+
min-height: 48px;
|
|
9719
|
+
}
|
|
9720
|
+
|
|
9721
|
+
/* Skip: text button, no border, chevrons */
|
|
9722
|
+
.form_window .action .bLwrg.fa-qbtn--skip {
|
|
9723
|
+
gap: 4px;
|
|
9724
|
+
padding: 0 10px;
|
|
9725
|
+
border: 0;
|
|
9726
|
+
border-radius: 14px;
|
|
9727
|
+
background: transparent;
|
|
9728
|
+
color: #6B7280;
|
|
9729
|
+
font-weight: 600;
|
|
9730
|
+
box-shadow: none;
|
|
9731
|
+
}
|
|
9732
|
+
.form_window .action .bLwrg.fa-qbtn--skip:hover {
|
|
9733
|
+
transform: none;
|
|
9734
|
+
color: var(--basic_action);
|
|
9735
|
+
background: color-mix(in srgb, var(--basic_action) 8%, transparent);
|
|
9736
|
+
}
|
|
9737
|
+
.form_window .action .bLwrg.fa-qbtn--skip:hover .fa-qbtn__icon {
|
|
9738
|
+
transform: translateX(2px);
|
|
9739
|
+
}
|
|
9740
|
+
[dir="rtl"] .form_window .action .bLwrg.fa-qbtn--skip:hover .fa-qbtn__icon {
|
|
9741
|
+
transform: translateX(-2px);
|
|
9742
|
+
}
|
|
9743
|
+
|
|
9744
|
+
@media (prefers-reduced-motion: reduce) {
|
|
9745
|
+
:is(.form_window, .info_window) .action .fa-qbtn,
|
|
9746
|
+
:is(.form_window, .info_window) .action .fa-qbtn__icon { transition: none; }
|
|
9747
|
+
}
|
|
9748
|
+
.header_tools .title {
|
|
9749
|
+
white-space: nowrap;
|
|
9750
|
+
overflow: hidden !important;
|
|
9751
|
+
text-overflow: ellipsis;
|
|
9752
|
+
}
|
|
9753
|
+
|
|
9754
|
+
/* ------------------------------------------------------------------
|
|
9755
|
+
Result screen: checkout bar above the bottom tab bar, and "Add all to cart"
|
|
9756
|
+
next to the products heading. Colors come from --basic_action, so a
|
|
9757
|
+
merchant's brand color carries over.
|
|
9758
|
+
------------------------------------------------------------------- */
|
|
9759
|
+
/* Checkout bar: same width as the tab bar, placed just above it by AnalysisResult.pinCartBar() */
|
|
9760
|
+
:is(.analysis-result-page, .history-detail-page) .fa-cartbar {
|
|
9761
|
+
position: absolute;
|
|
9762
|
+
left: 50%;
|
|
9763
|
+
top: 0;
|
|
9764
|
+
z-index: 999;
|
|
9765
|
+
width: min(620px, calc(100% - 24px));
|
|
9766
|
+
transform: translate3d(-50%, 0, 0);
|
|
9767
|
+
pointer-events: none;
|
|
9768
|
+
}
|
|
9769
|
+
|
|
9770
|
+
:is(.analysis-result-page, .history-detail-page).modal .fa-cartbar {
|
|
9771
|
+
position: fixed;
|
|
9772
|
+
top: auto;
|
|
9773
|
+
bottom: 96px;
|
|
9774
|
+
transform: translateX(-50%);
|
|
9775
|
+
}
|
|
9776
|
+
|
|
9777
|
+
@media (max-width: 768px) {
|
|
9778
|
+
:is(.analysis-result-page, .history-detail-page) .fa-cartbar {
|
|
9779
|
+
width: calc(100% - 16px);
|
|
9780
|
+
}
|
|
9781
|
+
}
|
|
9782
|
+
|
|
9783
|
+
:is(.analysis-result-page, .history-detail-page) .fa-cartbar__btn {
|
|
9784
|
+
position: relative;
|
|
9785
|
+
display: flex;
|
|
9786
|
+
align-items: center;
|
|
9787
|
+
gap: 12px;
|
|
9788
|
+
width: 100%;
|
|
9789
|
+
height: 56px;
|
|
9790
|
+
padding: 0 8px;
|
|
9791
|
+
border: 0;
|
|
9792
|
+
border-radius: 20px;
|
|
9793
|
+
background: linear-gradient(
|
|
9794
|
+
135deg,
|
|
9795
|
+
color-mix(in srgb, var(--basic_action) 84%, #fff) 0%,
|
|
9796
|
+
var(--basic_action) 50%,
|
|
9797
|
+
color-mix(in srgb, var(--basic_action) 82%, #000) 100%
|
|
9798
|
+
);
|
|
9799
|
+
color: #fff;
|
|
9800
|
+
font-family: inherit;
|
|
9801
|
+
font-size: 15px;
|
|
9802
|
+
font-weight: 700;
|
|
9803
|
+
line-height: 1;
|
|
9804
|
+
letter-spacing: 0.01em;
|
|
9805
|
+
box-shadow:
|
|
9806
|
+
0 4px 12px color-mix(in srgb, var(--basic_action) 22%, transparent),
|
|
9807
|
+
0 1px 2px rgba(15, 23, 42, 0.12),
|
|
9808
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
|
9809
|
+
cursor: pointer;
|
|
9810
|
+
pointer-events: none;
|
|
9811
|
+
opacity: 0;
|
|
9812
|
+
visibility: hidden;
|
|
9813
|
+
-webkit-tap-highlight-color: transparent;
|
|
9814
|
+
}
|
|
9815
|
+
|
|
9816
|
+
:is(.analysis-result-page, .history-detail-page) .fa-cartbar.is-visible .fa-cartbar__btn {
|
|
9817
|
+
pointer-events: auto;
|
|
9818
|
+
}
|
|
9819
|
+
|
|
9820
|
+
:is(.analysis-result-page, .history-detail-page) .fa-cartbar__btn:focus-visible {
|
|
9821
|
+
outline: 3px solid color-mix(in srgb, var(--basic_action) 45%, #fff);
|
|
9822
|
+
outline-offset: 3px;
|
|
9823
|
+
}
|
|
9824
|
+
|
|
9825
|
+
:is(.analysis-result-page, .history-detail-page) .fa-cartbar__icon {
|
|
9826
|
+
position: relative;
|
|
9827
|
+
display: inline-flex;
|
|
9828
|
+
flex: 0 0 auto;
|
|
9829
|
+
align-items: center;
|
|
9830
|
+
justify-content: center;
|
|
9831
|
+
width: 40px;
|
|
9832
|
+
height: 40px;
|
|
9833
|
+
border-radius: 14px;
|
|
9834
|
+
background: rgba(255, 255, 255, 0.2);
|
|
9835
|
+
}
|
|
9836
|
+
|
|
9837
|
+
:is(.analysis-result-page, .history-detail-page) .fa-cartbar__badge {
|
|
9838
|
+
position: absolute;
|
|
9839
|
+
top: -5px;
|
|
9840
|
+
inset-inline-end: -7px;
|
|
9841
|
+
min-width: 20px;
|
|
9842
|
+
height: 20px;
|
|
9843
|
+
padding: 0 5px;
|
|
9844
|
+
box-sizing: border-box;
|
|
9845
|
+
border-radius: 10px;
|
|
9846
|
+
background: #fff;
|
|
9847
|
+
color: var(--basic_action);
|
|
9848
|
+
font-size: 11px;
|
|
9849
|
+
font-weight: 800;
|
|
9850
|
+
line-height: 20px;
|
|
9851
|
+
text-align: center;
|
|
9852
|
+
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
|
|
9853
|
+
}
|
|
9854
|
+
|
|
9855
|
+
:is(.analysis-result-page, .history-detail-page) .fa-cartbar__label {
|
|
9856
|
+
flex: 1 1 auto;
|
|
9857
|
+
text-align: start;
|
|
9858
|
+
}
|
|
9859
|
+
|
|
9860
|
+
:is(.analysis-result-page, .history-detail-page) .fa-cartbar__arrow {
|
|
9861
|
+
display: inline-flex;
|
|
9862
|
+
flex: 0 0 auto;
|
|
9863
|
+
align-items: center;
|
|
9864
|
+
justify-content: center;
|
|
9865
|
+
width: 40px;
|
|
9866
|
+
height: 40px;
|
|
9867
|
+
border-radius: 14px;
|
|
9868
|
+
background: #fff;
|
|
9869
|
+
color: var(--basic_action);
|
|
9870
|
+
transition: transform 0.25s ease;
|
|
9871
|
+
}
|
|
9872
|
+
|
|
9873
|
+
:is(.analysis-result-page, .history-detail-page) .fa-cartbar__btn:hover .fa-cartbar__arrow {
|
|
9874
|
+
transform: translateX(3px);
|
|
9875
|
+
}
|
|
9876
|
+
|
|
9877
|
+
[dir="rtl"] :is(.analysis-result-page, .history-detail-page) .fa-cartbar__arrow svg {
|
|
9878
|
+
transform: scaleX(-1);
|
|
9879
|
+
}
|
|
9880
|
+
|
|
9881
|
+
[dir="rtl"] :is(.analysis-result-page, .history-detail-page) .fa-cartbar__btn:hover .fa-cartbar__arrow {
|
|
9882
|
+
transform: translateX(-3px);
|
|
9883
|
+
}
|
|
9884
|
+
|
|
9885
|
+
:is(.analysis-result-page, .history-detail-page) .fa-cartbar__btn.is-ripple::after {
|
|
9886
|
+
content: "";
|
|
9887
|
+
position: absolute;
|
|
9888
|
+
inset: 0;
|
|
9889
|
+
border-radius: inherit;
|
|
9890
|
+
pointer-events: none;
|
|
9891
|
+
animation: fa-cart-ripple 0.7s ease-out;
|
|
9892
|
+
}
|
|
9893
|
+
|
|
9894
|
+
@keyframes fa-cart-ripple {
|
|
9895
|
+
from {
|
|
9896
|
+
box-shadow: 0 0 0 0 color-mix(in srgb, var(--basic_action) 35%, transparent);
|
|
9897
|
+
}
|
|
9898
|
+
to {
|
|
9899
|
+
box-shadow: 0 0 0 7px color-mix(in srgb, var(--basic_action) 0%, transparent);
|
|
9900
|
+
}
|
|
9901
|
+
}
|
|
9902
|
+
|
|
9903
|
+
:is(.analysis-result-page, .history-detail-page) .fa-cartbar__fly {
|
|
9904
|
+
position: absolute;
|
|
9905
|
+
left: 0;
|
|
9906
|
+
top: 0;
|
|
9907
|
+
z-index: 40;
|
|
9908
|
+
width: 18px;
|
|
9909
|
+
height: 18px;
|
|
9910
|
+
border-radius: 50%;
|
|
9911
|
+
background: var(--basic_action);
|
|
9912
|
+
box-shadow:
|
|
9913
|
+
0 4px 12px color-mix(in srgb, var(--basic_action) 45%, transparent),
|
|
9914
|
+
inset 0 0 0 3px rgba(255, 255, 255, 0.55);
|
|
9915
|
+
pointer-events: none;
|
|
9916
|
+
}
|
|
9917
|
+
|
|
9918
|
+
/* "Add all to cart" next to the products heading */
|
|
9919
|
+
/* Products section heading: brand badge, clear title, readable description; "Add all" on the right.
|
|
9920
|
+
Grid: badge | title | action on the first row, the description below across the free width. */
|
|
9921
|
+
.recommendation_products .header_product {
|
|
9922
|
+
display: grid;
|
|
9923
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
9924
|
+
align-items: center;
|
|
9925
|
+
column-gap: 12px;
|
|
9926
|
+
row-gap: 6px;
|
|
9927
|
+
margin: 20px 0 16px;
|
|
9928
|
+
}
|
|
9929
|
+
.recommendation_products .header_product_content,
|
|
9930
|
+
.recommendation_products .header_product_text {
|
|
9931
|
+
display: contents;
|
|
9932
|
+
}
|
|
9933
|
+
.recommendation_products .header_product_badge {
|
|
9934
|
+
grid-column: 1;
|
|
9935
|
+
grid-row: 1;
|
|
9936
|
+
display: inline-flex;
|
|
9937
|
+
align-items: center;
|
|
9938
|
+
justify-content: center;
|
|
9939
|
+
width: 40px;
|
|
9940
|
+
height: 40px;
|
|
9941
|
+
border-radius: 14px;
|
|
9942
|
+
color: var(--basic);
|
|
9943
|
+
background: color-mix(in srgb, var(--basic) 12%, #fff);
|
|
9944
|
+
}
|
|
9945
|
+
.recommendation_products .header_product .title {
|
|
9946
|
+
grid-column: 2;
|
|
9947
|
+
grid-row: 1;
|
|
9948
|
+
}
|
|
9949
|
+
.recommendation_products .header_product .action {
|
|
9950
|
+
grid-column: 3;
|
|
9951
|
+
grid-row: 1;
|
|
9952
|
+
}
|
|
9953
|
+
.recommendation_products .header_product .description {
|
|
9954
|
+
grid-column: 2 / -1;
|
|
9955
|
+
grid-row: 2;
|
|
9956
|
+
}
|
|
9957
|
+
.recommendation_products .header_product .title,
|
|
9958
|
+
.history-detail-page .history-detail-embed .header_product .title {
|
|
9959
|
+
margin: 0;
|
|
9960
|
+
padding: 0;
|
|
9961
|
+
color: #111827;
|
|
9962
|
+
font-size: 18px;
|
|
9963
|
+
font-weight: 800;
|
|
9964
|
+
letter-spacing: -0.01em;
|
|
9965
|
+
line-height: 1.3;
|
|
9966
|
+
}
|
|
9967
|
+
.recommendation_products .header_product .description,
|
|
9968
|
+
.history-detail-page .history-detail-embed .header_product .description {
|
|
9969
|
+
margin: 0;
|
|
9970
|
+
max-width: 62ch;
|
|
9971
|
+
color: #6B7280;
|
|
9972
|
+
font-size: 14px;
|
|
9973
|
+
line-height: 1.55;
|
|
9974
|
+
opacity: 1;
|
|
9975
|
+
}
|
|
9976
|
+
@media (max-width: 768px) {
|
|
9977
|
+
.recommendation_products .header_product .description {
|
|
9978
|
+
grid-column: 1 / -1;
|
|
9979
|
+
}
|
|
9980
|
+
.recommendation_products .header_product .title,
|
|
9981
|
+
.history-detail-page .history-detail-embed .header_product .title {
|
|
9982
|
+
font-size: 16px;
|
|
9983
|
+
}
|
|
9984
|
+
.recommendation_products .header_product .description,
|
|
9985
|
+
.history-detail-page .history-detail-embed .header_product .description {
|
|
9986
|
+
font-size: 13px;
|
|
9987
|
+
}
|
|
9988
|
+
.recommendation_products .header_product_badge {
|
|
9989
|
+
width: 36px;
|
|
9990
|
+
height: 36px;
|
|
9991
|
+
border-radius: 12px;
|
|
9992
|
+
}
|
|
9993
|
+
}
|
|
9994
|
+
|
|
9995
|
+
:is(.analysis-result-page, .history-detail-page) :is(.header_product, .fa-routine-cart) .fa-add-all {
|
|
9996
|
+
display: inline-flex;
|
|
9997
|
+
align-items: center;
|
|
9998
|
+
gap: 6px;
|
|
9999
|
+
height: 36px;
|
|
10000
|
+
margin: 0;
|
|
10001
|
+
padding: 0 14px;
|
|
10002
|
+
border: 1.5px solid color-mix(in srgb, var(--basic_action) 32%, transparent);
|
|
10003
|
+
border-radius: 999px;
|
|
10004
|
+
background: color-mix(in srgb, var(--basic_action) 7%, #fff);
|
|
10005
|
+
color: var(--basic_action);
|
|
10006
|
+
font-family: inherit;
|
|
10007
|
+
font-size: 13px;
|
|
10008
|
+
font-weight: 600;
|
|
10009
|
+
line-height: 1;
|
|
10010
|
+
white-space: nowrap;
|
|
10011
|
+
cursor: pointer;
|
|
10012
|
+
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
|
|
10013
|
+
}
|
|
10014
|
+
|
|
10015
|
+
:is(.analysis-result-page, .history-detail-page) :is(.header_product, .fa-routine-cart) .fa-add-all:hover {
|
|
10016
|
+
border-color: var(--basic_action);
|
|
10017
|
+
background: color-mix(in srgb, var(--basic_action) 12%, #fff);
|
|
10018
|
+
}
|
|
10019
|
+
|
|
10020
|
+
:is(.analysis-result-page, .history-detail-page) :is(.header_product, .fa-routine-cart) .fa-add-all:active {
|
|
10021
|
+
transform: scale(0.97);
|
|
10022
|
+
}
|
|
10023
|
+
|
|
10024
|
+
:is(.analysis-result-page, .history-detail-page) :is(.header_product, .fa-routine-cart) .fa-add-all svg {
|
|
10025
|
+
flex: 0 0 auto;
|
|
10026
|
+
}
|
|
10027
|
+
|
|
10028
|
+
@media (max-width: 768px) {
|
|
10029
|
+
:is(.analysis-result-page, .history-detail-page) :is(.header_product, .fa-routine-cart) .fa-add-all {
|
|
10030
|
+
height: 34px;
|
|
10031
|
+
padding: 0 12px;
|
|
10032
|
+
font-size: 12px;
|
|
10033
|
+
}
|
|
10034
|
+
}
|
|
10035
|
+
|
|
10036
|
+
@media (prefers-reduced-motion: reduce) {
|
|
10037
|
+
:is(.analysis-result-page, .history-detail-page) .fa-cartbar__btn.is-ripple::after {
|
|
10038
|
+
animation: none;
|
|
10039
|
+
}
|
|
10040
|
+
}
|
|
10041
|
+
|
|
10042
|
+
/* room for the checkout bar above the tab bar, so the last products aren't hidden behind both */
|
|
10043
|
+
.analysis-result-page.has-cartbar .recommendation_modal_window > .body {
|
|
10044
|
+
padding-bottom: 184px;
|
|
10045
|
+
}
|
|
10046
|
+
|
|
10047
|
+
.history-detail-page.has-cartbar .history-detail-content {
|
|
10048
|
+
padding-bottom: 184px;
|
|
10049
|
+
}
|
|
10050
|
+
|
|
10051
|
+
/* Routine: "Add all to cart" under the morning / night card */
|
|
10052
|
+
.fa-routine-cart {
|
|
10053
|
+
display: flex;
|
|
10054
|
+
justify-content: flex-start;
|
|
10055
|
+
margin-top: 14px;
|
|
10056
|
+
}
|
|
10057
|
+
|
|
10058
|
+
.fa-routine-cart[hidden] {
|
|
10059
|
+
display: none;
|
|
10060
|
+
}
|
|
10061
|
+
|
|
10062
|
+
/* "Add again": the product is already in the cart, so the button steps back to a light,
|
|
10063
|
+
outlined look with a check, instead of repeating the filled "Add to cart" style. */
|
|
10064
|
+
.fa-product-card .fa-addToCart-btn.active,
|
|
10065
|
+
.product_item_box .product_add_to_cart.active {
|
|
10066
|
+
display: inline-flex;
|
|
10067
|
+
align-items: center;
|
|
10068
|
+
justify-content: center;
|
|
10069
|
+
gap: 7px;
|
|
10070
|
+
background: color-mix(in srgb, var(--product_action, var(--basic_action)) 10%, #fff);
|
|
10071
|
+
color: color-mix(in srgb, var(--product_action, var(--basic_action)) 78%, #000);
|
|
10072
|
+
border: 1.5px solid color-mix(in srgb, var(--product_action, var(--basic_action)) 40%, transparent);
|
|
10073
|
+
box-shadow: none;
|
|
10074
|
+
animation: fa-added-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
10075
|
+
}
|
|
10076
|
+
|
|
10077
|
+
.fa-product-card .fa-addToCart-btn.active::before,
|
|
10078
|
+
.product_item_box .product_add_to_cart.active::before {
|
|
10079
|
+
content: "";
|
|
10080
|
+
flex: 0 0 auto;
|
|
10081
|
+
width: 16px;
|
|
10082
|
+
height: 16px;
|
|
10083
|
+
border-radius: 50%;
|
|
10084
|
+
background-color: currentColor;
|
|
10085
|
+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm3.6 5.3a.9.9 0 0 0-1.3 0L7 8.6 5.7 7.3a.9.9 0 1 0-1.3 1.3l2 2a.9.9 0 0 0 1.3 0l4-4a.9.9 0 0 0 0-1.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
|
|
10086
|
+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm3.6 5.3a.9.9 0 0 0-1.3 0L7 8.6 5.7 7.3a.9.9 0 1 0-1.3 1.3l2 2a.9.9 0 0 0 1.3 0l4-4a.9.9 0 0 0 0-1.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
|
|
10087
|
+
}
|
|
10088
|
+
|
|
10089
|
+
.fa-product-card .fa-addToCart-btn.active:hover,
|
|
10090
|
+
.product_item_box .product_add_to_cart.active:hover {
|
|
10091
|
+
background: color-mix(in srgb, var(--product_action, var(--basic_action)) 16%, #fff);
|
|
10092
|
+
transform: none;
|
|
10093
|
+
box-shadow: none;
|
|
10094
|
+
}
|
|
10095
|
+
|
|
10096
|
+
/* Apex cards are dark: keep the "added" button tinted on the dark card */
|
|
10097
|
+
.fa-product-card.fa-preset-apex .fa-addToCart-btn.active {
|
|
10098
|
+
background: color-mix(in srgb, var(--product_action, var(--basic_action)) 16%, transparent);
|
|
10099
|
+
color: var(--product_action, var(--basic_action));
|
|
10100
|
+
border-color: color-mix(in srgb, var(--product_action, var(--basic_action)) 55%, transparent);
|
|
10101
|
+
}
|
|
10102
|
+
|
|
10103
|
+
@keyframes fa-added-pop {
|
|
10104
|
+
0% { transform: scale(0.92); }
|
|
10105
|
+
100% { transform: scale(1); }
|
|
10106
|
+
}
|
|
10107
|
+
|
|
10108
|
+
@media (prefers-reduced-motion: reduce) {
|
|
10109
|
+
.fa-product-card .fa-addToCart-btn.active,
|
|
10110
|
+
.product_item_box .product_add_to_cart.active {
|
|
10111
|
+
animation: none;
|
|
10112
|
+
}
|
|
10113
|
+
}
|
|
10114
|
+
|
|
10115
|
+
/* Result screen Products / Routine: same content width and product grid as the History
|
|
10116
|
+
tabs (1024px column, 12px gutters, 3 products per row on desktop). */
|
|
10117
|
+
/* 16px page gutter + 12px body padding, as in History */
|
|
10118
|
+
.analysis-result-page .recommendation_modal_window > .body {
|
|
10119
|
+
padding-left: 28px;
|
|
10120
|
+
padding-right: 28px;
|
|
10121
|
+
}
|
|
10122
|
+
|
|
10123
|
+
.analysis-result-page .recommendation_modal_window > .body > .main {
|
|
10124
|
+
width: 100%;
|
|
10125
|
+
max-width: 1000px;
|
|
10126
|
+
margin-left: auto;
|
|
10127
|
+
margin-right: auto;
|
|
10128
|
+
box-sizing: border-box;
|
|
10129
|
+
}
|
|
10130
|
+
|
|
10131
|
+
.analysis-result-page .analysis-result-panel-recommendations .products {
|
|
10132
|
+
display: grid;
|
|
10133
|
+
/* phones: two products a row (three from 769px) */
|
|
10134
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
10135
|
+
align-items: stretch;
|
|
10136
|
+
gap: 12px;
|
|
10137
|
+
margin: 0 0 10px;
|
|
10138
|
+
padding-top: 4px;
|
|
10139
|
+
}
|
|
10140
|
+
|
|
10141
|
+
.analysis-result-page .analysis-result-panel-recommendations .products .product_item_box {
|
|
10142
|
+
display: block;
|
|
10143
|
+
width: 100%;
|
|
10144
|
+
min-width: 0;
|
|
10145
|
+
padding: 0;
|
|
10146
|
+
box-sizing: border-box;
|
|
10147
|
+
}
|
|
10148
|
+
|
|
10149
|
+
.analysis-result-page .analysis-result-panel-recommendations .products > script {
|
|
10150
|
+
display: none;
|
|
10151
|
+
}
|
|
10152
|
+
|
|
10153
|
+
@media (min-width: 769px) {
|
|
10154
|
+
.analysis-result-page .recommendation_modal_window > .slider_header {
|
|
10155
|
+
width: calc(100% - 56px);
|
|
10156
|
+
max-width: 1000px;
|
|
10157
|
+
margin-left: auto;
|
|
10158
|
+
margin-right: auto;
|
|
10159
|
+
box-sizing: border-box;
|
|
10160
|
+
}
|
|
10161
|
+
|
|
10162
|
+
.analysis-result-page .analysis-result-panel-recommendations .products {
|
|
10163
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
10164
|
+
gap: 15px;
|
|
10165
|
+
}
|
|
10166
|
+
}
|
|
10167
|
+
|
|
10168
|
+
/* ------------------------------------------------------------------
|
|
10169
|
+
Top toolbar (modal app bar and result / products / routine headers):
|
|
10170
|
+
calm white bar, bold title, 40px round neutral buttons with one icon set.
|
|
10171
|
+
------------------------------------------------------------------ */
|
|
10172
|
+
.app_bar .header_tools,
|
|
10173
|
+
.recommendation_modal_window .header_tools {
|
|
10174
|
+
gap: 8px;
|
|
10175
|
+
min-height: 62px;
|
|
10176
|
+
box-sizing: border-box;
|
|
10177
|
+
padding: 11px 14px;
|
|
10178
|
+
border-bottom: 1px solid #EEF0F3;
|
|
10179
|
+
background: rgba(255, 255, 255, .92);
|
|
10180
|
+
-webkit-backdrop-filter: saturate(1.4) blur(10px);
|
|
10181
|
+
backdrop-filter: saturate(1.4) blur(10px);
|
|
10182
|
+
}
|
|
10183
|
+
.app_bar .header_tools .title,
|
|
10184
|
+
.recommendation_modal_window .header_tools .title {
|
|
10185
|
+
flex: 1 1 auto;
|
|
10186
|
+
min-width: 0;
|
|
10187
|
+
width: auto;
|
|
10188
|
+
margin: 0 4px;
|
|
10189
|
+
color: #111827;
|
|
10190
|
+
font-size: 16px;
|
|
10191
|
+
font-weight: 700;
|
|
10192
|
+
letter-spacing: -0.01em;
|
|
10193
|
+
line-height: 1.3;
|
|
10194
|
+
}
|
|
10195
|
+
.app_bar .header_tools .action {
|
|
10196
|
+
gap: 8px;
|
|
10197
|
+
margin: 0;
|
|
10198
|
+
}
|
|
10199
|
+
.header_tools .fa-tb {
|
|
10200
|
+
display: inline-flex;
|
|
10201
|
+
align-items: center;
|
|
10202
|
+
justify-content: center;
|
|
10203
|
+
flex: 0 0 auto;
|
|
10204
|
+
box-sizing: border-box;
|
|
10205
|
+
width: 40px;
|
|
10206
|
+
min-width: 40px;
|
|
10207
|
+
height: 40px;
|
|
10208
|
+
min-height: 40px;
|
|
10209
|
+
margin: 0;
|
|
10210
|
+
border-radius: 50%;
|
|
10211
|
+
background: #F3F4F6;
|
|
10212
|
+
color: #111827;
|
|
10213
|
+
cursor: pointer;
|
|
10214
|
+
transition: background-color .2s ease, color .2s ease, transform .2s ease;
|
|
10215
|
+
}
|
|
10216
|
+
.header_tools .fa-tb svg {
|
|
10217
|
+
width: 20px;
|
|
10218
|
+
height: 20px;
|
|
10219
|
+
}
|
|
10220
|
+
.header_tools .fa-tb:hover {
|
|
10221
|
+
background: color-mix(in srgb, var(--basic_action) 12%, #fff);
|
|
10222
|
+
color: var(--basic_action);
|
|
10223
|
+
}
|
|
10224
|
+
.header_tools .fa-tb:active {
|
|
10225
|
+
transform: scale(.94);
|
|
10226
|
+
}
|
|
10227
|
+
.header_tools .fa-tb:focus-visible {
|
|
10228
|
+
outline: 3px solid color-mix(in srgb, var(--basic_action) 35%, transparent);
|
|
10229
|
+
outline-offset: 2px;
|
|
10230
|
+
}
|
|
10231
|
+
/* the refresh icon spins once on hover, back nudges back */
|
|
10232
|
+
.header_tools .fa-tb.refresh svg,
|
|
10233
|
+
.header_tools .fa-tb.back svg {
|
|
10234
|
+
transition: transform .35s cubic-bezier(.22, 1, .36, 1);
|
|
10235
|
+
}
|
|
10236
|
+
.header_tools .fa-tb.refresh:hover svg {
|
|
10237
|
+
transform: rotate(-120deg);
|
|
10238
|
+
}
|
|
10239
|
+
.header_tools .fa-tb.back:hover svg {
|
|
10240
|
+
transform: translateX(-2px);
|
|
10241
|
+
}
|
|
10242
|
+
[dir="rtl"] .header_tools .fa-tb.back {
|
|
10243
|
+
transform: none;
|
|
10244
|
+
}
|
|
10245
|
+
[dir="rtl"] .header_tools .fa-tb.back svg {
|
|
10246
|
+
transform: scaleX(-1);
|
|
10247
|
+
}
|
|
10248
|
+
[dir="rtl"] .header_tools .fa-tb.back:hover svg {
|
|
10249
|
+
transform: scaleX(-1) translateX(-2px);
|
|
10250
|
+
}
|
|
10251
|
+
/* PDF being made: spinner in the brand color on the round button */
|
|
10252
|
+
.header_tools .fa-tb.download.pdf-downloading {
|
|
10253
|
+
opacity: 1;
|
|
10254
|
+
}
|
|
10255
|
+
@media (prefers-reduced-motion: reduce) {
|
|
10256
|
+
.header_tools .fa-tb,
|
|
10257
|
+
.header_tools .fa-tb svg { transition: none; }
|
|
10258
|
+
}
|
|
10259
|
+
|
|
10260
|
+
/* My Skin Report: the PDF card instead of the plain download button */
|
|
10261
|
+
.pdfDlWrapper.skin_report_pdf_cta {
|
|
10262
|
+
display: block;
|
|
10263
|
+
padding-top: 4px;
|
|
10264
|
+
}
|
|
10265
|
+
.skin_report_pdf_cta .pdf_cta {
|
|
10266
|
+
margin: 16px 0 4px;
|
|
10267
|
+
}
|
|
10268
|
+
|
|
10269
|
+
/* History detail in section / widget mode: the modal's top bar (AppBar) without Close */
|
|
10270
|
+
.history-detail-page .history-detail-back.app_bar {
|
|
10271
|
+
display: block;
|
|
10272
|
+
gap: 0;
|
|
10273
|
+
padding: 0;
|
|
10274
|
+
border-bottom: 0;
|
|
10275
|
+
background: transparent;
|
|
10276
|
+
}
|
|
10277
|
+
.history-detail-page .history-detail-back.app_bar .header_tools {
|
|
10278
|
+
position: relative;
|
|
10279
|
+
display: flex;
|
|
10280
|
+
align-items: center;
|
|
10281
|
+
}
|
|
10282
|
+
.history-detail-page .history-detail-back.app_bar .history-detail-back-actions {
|
|
10283
|
+
margin-left: auto;
|
|
10284
|
+
}
|
|
10285
|
+
[dir="rtl"] .history-detail-page .history-detail-back.app_bar .history-detail-back-actions {
|
|
10286
|
+
margin-left: 0;
|
|
10287
|
+
margin-right: auto;
|
|
10288
|
+
}
|
|
10289
|
+
.history-detail-page .history-detail-back-actions .download.fa-tb {
|
|
10290
|
+
display: inline-flex !important;
|
|
10291
|
+
}
|
|
10292
|
+
|
|
10293
|
+
/* ------------------------------------------------------------------
|
|
10294
|
+
Camera light guide (LightGuide.js), under the face oval:
|
|
10295
|
+
light compass (turn toward the sun until it sits in the ring) and light meter (too dark).
|
|
10296
|
+
------------------------------------------------------------------ */
|
|
10297
|
+
.face_age .fa-light {
|
|
10298
|
+
--fa-light-ok: #B5FF6A;
|
|
10299
|
+
position: absolute;
|
|
10300
|
+
inset: 0;
|
|
10301
|
+
z-index: 0; /* under the oval and the help text */
|
|
10302
|
+
pointer-events: none;
|
|
10303
|
+
}
|
|
10304
|
+
/* widgets: laid out over the face oval box (percentages are of the oval) */
|
|
10305
|
+
.face_age .fa-light--widgets {
|
|
10306
|
+
inset: 0;
|
|
10307
|
+
z-index: 3;
|
|
10308
|
+
}
|
|
10309
|
+
.fa-light > div {
|
|
10310
|
+
position: absolute;
|
|
10311
|
+
opacity: 0;
|
|
10312
|
+
visibility: hidden;
|
|
10313
|
+
transition: opacity .16s ease, visibility 0s linear .16s;
|
|
10314
|
+
}
|
|
10315
|
+
.fa-light[data-state] > div {
|
|
10316
|
+
transition: opacity .35s ease, visibility 0s;
|
|
10317
|
+
}
|
|
10318
|
+
.fa-light svg {
|
|
10319
|
+
display: block;
|
|
10320
|
+
width: 100%;
|
|
10321
|
+
height: 100%;
|
|
10322
|
+
overflow: visible;
|
|
10323
|
+
}
|
|
10324
|
+
/* soft dark gradient at the bottom so the widget and the text read on any photo */
|
|
10325
|
+
.fa-light__shade {
|
|
10326
|
+
left: 0;
|
|
10327
|
+
right: 0;
|
|
10328
|
+
bottom: 0;
|
|
10329
|
+
height: 46%;
|
|
10330
|
+
background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .18) 35%, rgba(0, 0, 0, .55) 75%, rgba(0, 0, 0, .7));
|
|
10331
|
+
}
|
|
10332
|
+
.fa-light[data-state] .fa-light__shade,
|
|
10333
|
+
.fa-light[data-state="side"] .fa-light__compass,
|
|
10334
|
+
.fa-light[data-state="place"] .fa-light__place,
|
|
10335
|
+
.fa-light[data-state="dark"] .fa-light__meter {
|
|
10336
|
+
opacity: 1;
|
|
10337
|
+
visibility: visible;
|
|
10338
|
+
}
|
|
10339
|
+
|
|
10340
|
+
/* light compass */
|
|
10341
|
+
.fa-light__compass {
|
|
10342
|
+
--range: min(38%, 6.5rem);
|
|
10343
|
+
left: 50%;
|
|
10344
|
+
/* low in the oval: at most ~60px above its bottom edge, still clear of the outline */
|
|
10345
|
+
bottom: 20px;
|
|
10346
|
+
width: min(74%, 15rem);
|
|
10347
|
+
height: 64px;
|
|
10348
|
+
transform: translateX(-50%);
|
|
10349
|
+
color: #fff;
|
|
10350
|
+
}
|
|
10351
|
+
.fa-lc__ring,
|
|
10352
|
+
.fa-lc__sun,
|
|
10353
|
+
.fa-lc__arrow {
|
|
10354
|
+
position: absolute;
|
|
10355
|
+
top: 50%;
|
|
10356
|
+
left: 50%;
|
|
10357
|
+
}
|
|
10358
|
+
.fa-lc__ring {
|
|
10359
|
+
width: 64px;
|
|
10360
|
+
height: 64px;
|
|
10361
|
+
transform: translate(-50%, -50%);
|
|
10362
|
+
transition: filter .2s ease, width .25s ease, height .25s ease;
|
|
10363
|
+
}
|
|
10364
|
+
.fa-lc__outer {
|
|
10365
|
+
stroke: rgba(255, 255, 255, .85);
|
|
10366
|
+
transition: stroke .2s ease;
|
|
10367
|
+
}
|
|
10368
|
+
.fa-lc__inner {
|
|
10369
|
+
stroke: rgba(255, 255, 255, .55);
|
|
10370
|
+
transition: opacity .2s ease;
|
|
10371
|
+
}
|
|
10372
|
+
.fa-lc__sun {
|
|
10373
|
+
z-index: 2;
|
|
10374
|
+
width: 30px;
|
|
10375
|
+
height: 30px;
|
|
10376
|
+
left: calc(50% + var(--az, 0) * var(--range));
|
|
10377
|
+
transform: translate(-50%, -50%);
|
|
10378
|
+
/* the same white sun as on the light meter */
|
|
10379
|
+
color: #fff;
|
|
10380
|
+
filter: drop-shadow(0 0 10px rgba(255, 255, 255, .45));
|
|
10381
|
+
transition: left .16s cubic-bezier(.33, 1, .68, 1), color .2s ease, filter .2s ease;
|
|
10382
|
+
}
|
|
10383
|
+
.fa-lc__arrow {
|
|
10384
|
+
z-index: 1;
|
|
10385
|
+
width: 34px;
|
|
10386
|
+
height: 20px;
|
|
10387
|
+
color: var(--fa-light-ok);
|
|
10388
|
+
/* halfway between the ring's edge (32px) and the sun's inner edge, so they never touch
|
|
10389
|
+
(left, not translate: --range is a % of the compass width) */
|
|
10390
|
+
left: calc(50% + var(--az, 0) * var(--range) / 2 + var(--dir, 1) * 8.5px);
|
|
10391
|
+
transform: translate(-50%, -50%) scaleX(var(--dir, 1));
|
|
10392
|
+
filter: drop-shadow(0 0 6px rgba(181, 255, 106, .6));
|
|
10393
|
+
transition: left .16s cubic-bezier(.33, 1, .68, 1), opacity .2s ease;
|
|
10394
|
+
}
|
|
10395
|
+
.fa-lc__arrow > span {
|
|
10396
|
+
display: block;
|
|
10397
|
+
width: 100%;
|
|
10398
|
+
height: 100%;
|
|
10399
|
+
animation: fa-lc-nudge 1.1s ease-in-out infinite;
|
|
10400
|
+
}
|
|
10401
|
+
.fa-light__compass.is-near .fa-lc__ring {
|
|
10402
|
+
filter: drop-shadow(0 0 10px rgba(255, 255, 255, .3));
|
|
10403
|
+
}
|
|
10404
|
+
.fa-light__compass.is-aligned .fa-lc__arrow,
|
|
10405
|
+
.fa-light__compass.is-near .fa-lc__arrow {
|
|
10406
|
+
opacity: 0;
|
|
10407
|
+
}
|
|
10408
|
+
.fa-light__compass.is-aligned .fa-lc__ring {
|
|
10409
|
+
width: 74px;
|
|
10410
|
+
height: 74px;
|
|
10411
|
+
filter: drop-shadow(0 0 16px rgba(181, 255, 106, .6));
|
|
10412
|
+
}
|
|
10413
|
+
.fa-light__compass.is-aligned .fa-lc__outer {
|
|
10414
|
+
stroke: var(--fa-light-ok);
|
|
10415
|
+
}
|
|
10416
|
+
.fa-light__compass.is-aligned .fa-lc__inner {
|
|
10417
|
+
opacity: 0;
|
|
10418
|
+
}
|
|
10419
|
+
.fa-light__compass.is-aligned .fa-lc__sun {
|
|
10420
|
+
color: var(--fa-light-ok);
|
|
10421
|
+
filter: drop-shadow(0 0 14px rgba(181, 255, 106, .7));
|
|
10422
|
+
}
|
|
10423
|
+
|
|
10424
|
+
/* keep your face inside the circle: the little face glides into the dashed target */
|
|
10425
|
+
.fa-light__place {
|
|
10426
|
+
left: 50%;
|
|
10427
|
+
bottom: 12px;
|
|
10428
|
+
width: 120px;
|
|
10429
|
+
height: 80px;
|
|
10430
|
+
transform: translateX(-50%);
|
|
10431
|
+
color: #fff;
|
|
10432
|
+
filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .45));
|
|
10433
|
+
}
|
|
10434
|
+
.fa-lp__target {
|
|
10435
|
+
stroke: rgba(255, 255, 255, .9);
|
|
10436
|
+
}
|
|
10437
|
+
.fa-lp__face {
|
|
10438
|
+
transform-box: view-box;
|
|
10439
|
+
transform-origin: 60px 40px;
|
|
10440
|
+
}
|
|
10441
|
+
.fa-lp__face :is(ellipse, path) {
|
|
10442
|
+
vector-effect: non-scaling-stroke;
|
|
10443
|
+
}
|
|
10444
|
+
.fa-light[data-state="place"] .fa-lp__face {
|
|
10445
|
+
animation: fa-lp-glide 2s cubic-bezier(.45, 0, .2, 1) infinite;
|
|
10446
|
+
}
|
|
10447
|
+
.fa-light[data-state="place"] .fa-lp__target {
|
|
10448
|
+
animation: fa-lp-target 2s ease-in-out infinite;
|
|
10449
|
+
}
|
|
10450
|
+
@keyframes fa-lp-glide {
|
|
10451
|
+
0% { transform: translate(var(--fx, 0), var(--fy, 0)) scale(var(--fs, 1)); opacity: 0; }
|
|
10452
|
+
12% { transform: translate(var(--fx, 0), var(--fy, 0)) scale(var(--fs, 1)); opacity: 1; }
|
|
10453
|
+
62% { transform: none; opacity: 1; }
|
|
10454
|
+
88% { transform: none; opacity: 1; }
|
|
10455
|
+
100% { transform: none; opacity: 0; }
|
|
10456
|
+
}
|
|
10457
|
+
/* the target lights up green the moment the face arrives */
|
|
10458
|
+
@keyframes fa-lp-target {
|
|
10459
|
+
0%, 58% { stroke: rgba(255, 255, 255, .9); filter: none; }
|
|
10460
|
+
66%, 88% { stroke: var(--fa-light-ok); filter: drop-shadow(0 0 6px rgba(181, 255, 106, .8)); }
|
|
10461
|
+
100% { stroke: rgba(255, 255, 255, .9); filter: none; }
|
|
10462
|
+
}
|
|
10463
|
+
|
|
10464
|
+
/* light meter */
|
|
10465
|
+
.fa-light__meter {
|
|
10466
|
+
left: 50%;
|
|
10467
|
+
bottom: 22px;
|
|
10468
|
+
display: flex;
|
|
10469
|
+
align-items: center;
|
|
10470
|
+
gap: 8px;
|
|
10471
|
+
padding: 6px 2px;
|
|
10472
|
+
max-width: 82%;
|
|
10473
|
+
box-sizing: border-box;
|
|
10474
|
+
transform: translateX(-50%);
|
|
10475
|
+
color: #fff;
|
|
10476
|
+
}
|
|
10477
|
+
.fa-lm__icon {
|
|
10478
|
+
display: flex;
|
|
10479
|
+
width: 26px;
|
|
10480
|
+
height: 26px;
|
|
10481
|
+
transition: opacity .15s ease, color .2s ease, filter .2s ease;
|
|
10482
|
+
}
|
|
10483
|
+
.fa-lm__moon {
|
|
10484
|
+
opacity: 1;
|
|
10485
|
+
}
|
|
10486
|
+
.fa-lm__sun {
|
|
10487
|
+
opacity: .55;
|
|
10488
|
+
animation: fa-lm-call 1.6s ease-in-out infinite;
|
|
10489
|
+
}
|
|
10490
|
+
.fa-light__meter.is-optimum .fa-lm__moon {
|
|
10491
|
+
opacity: .55;
|
|
10492
|
+
}
|
|
10493
|
+
.fa-light__meter.is-optimum .fa-lm__sun {
|
|
10494
|
+
opacity: 1;
|
|
10495
|
+
color: var(--fa-light-ok);
|
|
10496
|
+
filter: drop-shadow(0 0 10px rgba(181, 255, 106, .7));
|
|
10497
|
+
animation: none;
|
|
10498
|
+
}
|
|
10499
|
+
.fa-lm__bars {
|
|
10500
|
+
display: flex;
|
|
10501
|
+
align-items: center;
|
|
10502
|
+
gap: 7px;
|
|
10503
|
+
}
|
|
10504
|
+
.fa-lm__bars i {
|
|
10505
|
+
position: relative;
|
|
10506
|
+
display: block;
|
|
10507
|
+
width: 7px;
|
|
10508
|
+
height: 22px;
|
|
10509
|
+
border-radius: 3px;
|
|
10510
|
+
background: currentColor;
|
|
10511
|
+
opacity: calc(.35 + .65 * var(--fill, 0));
|
|
10512
|
+
transform: scale(calc(1 + .25 * var(--swell, 0)), calc(1 + .75 * var(--swell, 0)));
|
|
10513
|
+
transition: transform .15s ease, opacity .15s ease;
|
|
10514
|
+
}
|
|
10515
|
+
.fa-lm__bars i::before {
|
|
10516
|
+
content: "";
|
|
10517
|
+
position: absolute;
|
|
10518
|
+
inset: 0;
|
|
10519
|
+
border-radius: inherit;
|
|
10520
|
+
opacity: var(--fill, 0);
|
|
10521
|
+
box-shadow: 0 0 14px -1px currentColor, 0 0 5px -1px currentColor;
|
|
10522
|
+
}
|
|
10523
|
+
.fa-light__meter.is-optimum .fa-lm__bars {
|
|
10524
|
+
color: var(--fa-light-ok);
|
|
10525
|
+
}
|
|
10526
|
+
|
|
10527
|
+
/* the arrow keeps nudging toward the light */
|
|
10528
|
+
@keyframes fa-lc-nudge {
|
|
10529
|
+
0%, 100% { transform: translateX(-3px); opacity: .75; }
|
|
10530
|
+
50% { transform: translateX(4px); opacity: 1; }
|
|
10531
|
+
}
|
|
10532
|
+
/* the sun on the meter calls for more light */
|
|
10533
|
+
@keyframes fa-lm-call {
|
|
10534
|
+
0%, 100% { transform: scale(1); }
|
|
10535
|
+
50% { transform: scale(1.12); }
|
|
10536
|
+
}
|
|
10537
|
+
|
|
10538
|
+
@media (prefers-reduced-motion: reduce) {
|
|
10539
|
+
.fa-light > div,
|
|
10540
|
+
.fa-light[data-state] > div,
|
|
10541
|
+
.fa-light * { transition: none !important; animation: none !important; }
|
|
10542
|
+
}
|
|
10543
|
+
|
|
10544
|
+
/* Dotted face mesh when the face is found (MeshIntro.js): same box and fit as the camera canvas */
|
|
10545
|
+
.face_age canvas.fa-mesh {
|
|
10546
|
+
position: absolute;
|
|
10547
|
+
inset: 0;
|
|
10548
|
+
width: 100%;
|
|
10549
|
+
height: 100% !important;
|
|
10550
|
+
object-fit: cover;
|
|
10551
|
+
pointer-events: none;
|
|
10552
|
+
}
|
|
10553
|
+
|
|
10554
|
+
/* Head turn: the dark area outside the face oval glows in the brand colour on the side to turn
|
|
10555
|
+
toward (WebCamImage.setTurnGlow); the oval itself stays clear. */
|
|
10556
|
+
.face_age .fa-turn {
|
|
10557
|
+
--fa-turn-color: var(--basic_action, #EF3786);
|
|
10558
|
+
position: absolute;
|
|
10559
|
+
/* sits in the oval box but covers the whole camera view (clipped by .facePosition) */
|
|
10560
|
+
inset: -100vmax;
|
|
10561
|
+
pointer-events: none;
|
|
10562
|
+
opacity: 0;
|
|
10563
|
+
transition: opacity .35s ease;
|
|
10564
|
+
-webkit-mask-image: radial-gradient(var(--fa-turn-rx, 30%) var(--fa-turn-ry, 30%) at var(--fa-turn-cx, 50%) var(--fa-turn-cy, 50%), transparent 100%, #000 102%);
|
|
10565
|
+
mask-image: radial-gradient(var(--fa-turn-rx, 30%) var(--fa-turn-ry, 30%) at var(--fa-turn-cx, 50%) var(--fa-turn-cy, 50%), transparent 100%, #000 102%);
|
|
10566
|
+
}
|
|
10567
|
+
.face_age .fa-turn[data-dir] {
|
|
10568
|
+
opacity: var(--fa-turn-strength, 1);
|
|
10569
|
+
}
|
|
10570
|
+
.face_age .fa-turn::before {
|
|
10571
|
+
content: "";
|
|
10572
|
+
position: absolute;
|
|
10573
|
+
left: var(--fa-turn-vl, 0);
|
|
10574
|
+
top: var(--fa-turn-vt, 0);
|
|
10575
|
+
width: var(--fa-turn-vw, 100%);
|
|
10576
|
+
height: var(--fa-turn-vh, 100%);
|
|
10577
|
+
animation: fa-turn-pulse 1.4s ease-in-out infinite;
|
|
10578
|
+
}
|
|
10579
|
+
.face_age .fa-turn[data-dir="left"]::before {
|
|
10580
|
+
background: linear-gradient(90deg,
|
|
10581
|
+
color-mix(in srgb, var(--fa-turn-color) 95%, transparent) 0%,
|
|
10582
|
+
color-mix(in srgb, var(--fa-turn-color) 60%, transparent) 18%,
|
|
10583
|
+
color-mix(in srgb, var(--fa-turn-color) 18%, transparent) 38%,
|
|
10584
|
+
transparent 55%);
|
|
10585
|
+
}
|
|
10586
|
+
.face_age .fa-turn[data-dir="right"]::before {
|
|
10587
|
+
background: linear-gradient(270deg,
|
|
10588
|
+
color-mix(in srgb, var(--fa-turn-color) 95%, transparent) 0%,
|
|
10589
|
+
color-mix(in srgb, var(--fa-turn-color) 60%, transparent) 18%,
|
|
10590
|
+
color-mix(in srgb, var(--fa-turn-color) 18%, transparent) 38%,
|
|
10591
|
+
transparent 55%);
|
|
10592
|
+
}
|
|
10593
|
+
.face_age .fa-turn[data-dir="up"]::before {
|
|
10594
|
+
background: linear-gradient(180deg,
|
|
10595
|
+
color-mix(in srgb, var(--fa-turn-color) 95%, transparent) 0%,
|
|
10596
|
+
color-mix(in srgb, var(--fa-turn-color) 50%, transparent) 22%,
|
|
10597
|
+
transparent 45%);
|
|
10598
|
+
}
|
|
10599
|
+
.face_age .fa-turn[data-dir="down"]::before {
|
|
10600
|
+
background: linear-gradient(0deg,
|
|
10601
|
+
color-mix(in srgb, var(--fa-turn-color) 95%, transparent) 0%,
|
|
10602
|
+
color-mix(in srgb, var(--fa-turn-color) 50%, transparent) 22%,
|
|
10603
|
+
transparent 45%);
|
|
10604
|
+
}
|
|
10605
|
+
@keyframes fa-turn-pulse {
|
|
10606
|
+
0%, 100% { opacity: .7; }
|
|
10607
|
+
50% { opacity: 1; }
|
|
10608
|
+
}
|
|
10609
|
+
@media (prefers-reduced-motion: reduce) {
|
|
10610
|
+
.face_age .fa-turn { transition: none; }
|
|
10611
|
+
.face_age .fa-turn::before { animation: none; }
|
|
10612
|
+
}
|
|
10613
|
+
|
|
10614
|
+
/* "Keep your face inside the circle": the whole outside glows, softly breathing inward */
|
|
10615
|
+
.face_age .fa-turn[data-dir="all"]::before {
|
|
10616
|
+
background: radial-gradient(ellipse 70% 62% at 50% 52%,
|
|
10617
|
+
transparent 55%,
|
|
10618
|
+
color-mix(in srgb, var(--fa-turn-color) 35%, transparent) 75%,
|
|
10619
|
+
color-mix(in srgb, var(--fa-turn-color) 85%, transparent) 100%);
|
|
10620
|
+
animation: fa-turn-breathe 1.6s ease-in-out infinite;
|
|
10621
|
+
}
|
|
10622
|
+
@keyframes fa-turn-breathe {
|
|
10623
|
+
0%, 100% { opacity: .65; transform: scale(1.04); }
|
|
10624
|
+
50% { opacity: 1; transform: scale(1); }
|
|
10625
|
+
}
|
|
10626
|
+
@media (prefers-reduced-motion: reduce) {
|
|
10627
|
+
.face_age .fa-turn[data-dir="all"]::before { animation: none; }
|
|
10628
|
+
}
|
|
10629
|
+
|
|
10630
|
+
/* displayModel 'fullscreen': the app cannot be closed, so no close buttons in the top bars */
|
|
10631
|
+
#faceAge-module-body.fullscreen .close.fa-tb {
|
|
10632
|
+
display: none !important;
|
|
8797
10633
|
}
|