@@ -349,133 +349,78 @@ transition: 0.35s 0.35s transform cubic-bezier(.1,.72,.4,.97);
349349*/
350350
351351
352- : root {
353- --background-gray : # f2f2f7 ;
354- --card-white : # ffffff ;
355- --text-dark : # 1c1c1e ;
356- --text-gray : # 8e8e93 ;
357- --accent : # 007aff ;
358- }
359-
360- body {
361- margin : 0 ;
362- font-family : -apple-system, BlinkMacSystemFont, "Segoe UI" , Roboto, Helvetica, Arial, sans-serif;
363- background : var (--background-gray );
364- height : 100vh ;
365- overflow : hidden;
366- }
367352
368- button {
369- position : absolute;
370- top : 20px ;
371- left : 20px ;
372- z-index : 2 ;
373- padding : 10px 18px ;
374- border : none;
375- background : var (--accent );
376- color : white;
377- border-radius : 12px ;
378- font-size : 16px ;
379- cursor : pointer;
380- }
381-
382- .bottom-sheet {
383- position : fixed;
384- bottom : 0 ;
385- left : 0 ;
386- right : 0 ;
387- height : 92% ;
388- background : var (--background-gray );
389- border-top-left-radius : 28px ;
390- border-top-right-radius : 28px ;
391- box-shadow : 0 -8px 30px rgba (0 , 0 , 0 , 0.12 );
392- transform : translateY (65% );
393- transition : transform 0.3s ease;
394- display : flex;
395- flex-direction : column;
396- overflow-y : auto;
397- }
398-
399- .bottom-sheet .open {
400- transform : translateY (0% );
401- }
402-
403- .drag-handle {
404- width : 44px ;
405- height : 5px ;
406- background : # ccc ;
407- border-radius : 3px ;
408- margin : 12px auto;
409- }
410-
411- .sheet-content {
412- padding : 0 20px 24px ;
413- }
414-
415- .product-header {
416- text-align : center;
417- padding : 8px 0 ;
353+ html ,
354+ .root {
355+ padding : 0 ;
356+ margin : 0 ;
357+ font-size : 18px ;
418358}
419359
420- . product-header img {
421- width : 100 % ;
422- max-height : 220 px ;
423- object-fit : cover ;
424- border-radius : 16 px ;
425- margin-bottom : 10 px ;
360+ body {
361+ font : menu ;
362+ font-size : 1 rem ;
363+ line-height : 1.4 ;
364+ padding : 0 ;
365+ margin : 0 ;
426366}
427-
428- .product-name {
429- font-size : 24px ;
430- font-weight : 600 ;
431- margin : 0 ;
432- color : var (--text-dark );
367+ section {
368+ padding-top : 0rem ;
369+ width : 100% ;
370+ margin : auto;
433371}
434-
435- .product-info {
436- display : grid;
437- gap : 8px ;
438- margin-top : 16px ;
372+ h1 {
373+ font-size : 2rem ;
374+ font-weight : 500 ;
439375}
440-
441- .info-card {
442- background : var (--card-white );
443- border-radius : 16px ;
444- padding : 16px ;
445- box-shadow : 0 1px 4px rgba (0 , 0 , 0 , 0.03 );
376+ details [open ] summary ~ * {
377+ animation : open 0.3s ease-in-out;
446378}
447379
448- .info-card h3 {
449- margin : 0 0 10px ;
450- font-size : 18px ;
451- color : var (--text-dark );
380+ @keyframes open {
381+ 0% {
382+ opacity : 0 ;
452383}
453-
454- .info-card p {
455- margin : 4px 0 ;
456- color : var (--text-gray );
457- font-size : 15px ;
384+ 100% {
385+ opacity : 1 ;
458386}
459-
460- .steps-list {
461- list-style-type : none;
462- padding : 0 ;
463- margin : 0 ;
464387}
465-
466- .steps-list li {
467- padding : 8px 0 ;
468- border-bottom : 1px solid # eee ;
469- color : var (--text-dark );
388+ details summary ::-webkit-details-marker {
389+ display : none;
470390}
471391
472- .certificate-images {
473- margin-top : 10px ;
474- display : flex;
475- gap : 8px ;
392+ details summary {
393+ width : 100% ;
394+ padding : 0.5rem 0 ;
395+ border-top : 1px solid black;
396+ position : relative;
397+ cursor : pointer;
398+ font-size : 1.25rem ;
399+ font-weight : 300 ;
400+ list-style : none;
476401}
477402
478- .certificate-images img {
479- height : 32px ;
480- border-radius : 4px ;
403+ details summary : after {
404+ content : "+" ;
405+ color : black;
406+ position : absolute;
407+ font-size : 1.75rem ;
408+ line-height : 0 ;
409+ margin-top : 0.75rem ;
410+ right : 0 ;
411+ font-weight : 200 ;
412+ transform-origin : center;
413+ transition : 200ms linear;
414+ }
415+ details [open ] summary : after {
416+ transform : rotate (45deg );
417+ font-size : 2rem ;
418+ }
419+ details summary {
420+ outline : 0 ;
421+ }
422+ details p {
423+ font-size : 0.95rem ;
424+ margin : 0 0 1rem ;
425+ padding-top : 1rem ;
481426}
0 commit comments